ES6环境搭建及react-router学习

Buzz69 等级 334 0 0

一、起因

ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下。不过,由于现在大部分的浏览器对ES6的支持程度都不是很好。所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES7的代码转为ES5的代码。今天,就配置了一下环境,写了一个react-router,主要是练习自己的编程能力,哈哈。。。在此分享一下!

二、ES6环境搭建

搭建环境的工具有很多种,jspm,webpack,gulp等等。。。我主要是采用gulp+babel+browserify来搭建的。具体步骤如下(以下步骤均在node环境下进行):

①新建项目,打开命令行或者git hash,输入git init.

②安装gulp,输入npm install gulp

③安装一些必须的插件,看个人需要吧。我安装了一些: babel-preset-es2015 browserify gulp-babel gulp-concat gulp-cssnano gulp-uglify vinyl-source-stream gulp-sass

④配置gulpfile文件。

文件目录结构如下:

ES6环境搭建及react-router学习

我的配置如下:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify');
const babelify=require('babelify');
const source = require('vinyl-source-stream');
// 编译并压缩js
gulp.task('convertJS', function(){
  return gulp.src('app/js/\*.js')
    .pipe(babel({
      presets: \['es2015','react'\]
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})
// 合并并压缩css
gulp.task('convertCSS', function(){
  return gulp.src('app/style/\*.scss')
    .pipe(sass())
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(rename(function(path){
      path.basename += '.min';
    }))
    .pipe(gulp.dest('dist/style'));
})
// 监视文件变化,自动执行任务
gulp.task('watch', function(){
  gulp.watch('app/style/\*.scss', \['convertCSS'\]);
  gulp.watch('app/js/\*.js', \['convertJS', 'browserify'\]);
})
// browserify
gulp.task("browserify", function () {
    var b = browserify({
        entries: "dist/js/app.js"
    });
    return b.transform(babelify)
       .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist/js"));
});
gulp.task('start', \['convertJS', 'convertCSS', 'browserify', 'watch'\]);

注意,即使这些都安装好了,运行gulp命令的时候还是会报一个未定义babel对象的错,如图:

ES6环境搭建及react-router学习

一开始我也不知道为什么,我把编译ES6的环境单独出来(也就是把react相关的内容和插件注释掉),发现是可行的。所以问题就出在编译react的时候了。最终在stackoverflow上面找到了答案。

ES6环境搭建及react-router学习

大概的意思就是,babel在编译react的时候,有一个插件被分离了出来,需要另外安装,类似于补丁之类的东西吧!按照上面这个说法,我又去安装了一下这个,发现真的可以了,不报错了^_^。至此,环境准备好了。

三、路由搭建

 首先,你可以点击这里,对react-route有进一步的了解。

其实,只是搭建环境比教耗费时间,搭路由参考官方的例子的话倒是很快的。我就写了一个hello world级别的路由。如下代码:

import React from 'react';
import ReactDOM from 'react-dom';
import { hashHistory, Route, Router } from 'react-router';
import { render } from 'react-dom'

import List from './list';

class Photo extends React.Component {
  render() {
    return <p>hello, winty!</p>
  }
}

render((
    <Router history={hashHistory}>
      <Route path="/" component={Photo}/>
      {/\* add the routes here \*/}
      <Route path="/list" component={List}/>
    </Router>
), document.getElementById('app'));

引入的List模块代码如下:

import React from 'react' class List extends React.Component {
    render() { return <div>hello,List</div>
 }
}

正当我为写这么水的程序而不好意思的时候,打开浏览器,竟然。。。

真的就输出了hello,winty!

好吧。我F12打开控制台的时候,很伤心,报了两个警告:

ES6环境搭建及react-router学习

最伤心的是,我各种找资料,都没有找到解释、各种群上问,都没有人知道的回复我。。。

好吧,抱着警告不影响运行的态度,我尝试改变url,通过路由跳到list那里去。。。

然而。。。

结果又亮瞎了。。。

ES6环境搭建及react-router学习

结果什么都没有,还报错了。。。容我静静啊。。。

于是我又一次各种查、各种查、各种问、各种问。。。

本来想问清楚了,再来写这个博客,然而。。。还是解决不了。。。于是只能到这里来求助了。。。

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
快速掌握es6+新特性及es6核心语法盘点
首先先祝各位国庆快乐,好好去体验生活的快乐,也祝祖国生日快乐,越变越强大,越来越繁荣。 接下来我会总结一些工作中常用也比较核心的es6的语法知识,后面又要慢慢开始
10分钟教你手写8个常用的自定义hooks
前言 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
使用 State Hook – React
使用 State Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。中使用下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { //
使用 Effect Hook – React
使用 Effect Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。_Effect Hook_ 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from 'reac
ES6环境搭建及react-router学习
一、起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下。不过,由于现在大部分的浏览器对ES6的支持程度都不是很好。所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES7的代码转为ES5的代码。今天,就配置了一下环境
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
React 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言。为什么要引入 Reac
Node.js 如何处理 ES6 模块
Node.js 如何处理 ES6 模块作者: 日期: 学习 JavaScript 语言,你会发现它有两种格式的模块。一种是 ES6 模块,简称 ESM;另一种是 Node.js 专用的 CommonJS 模块,简称 CJS。这两种模块不兼容。很多人使用 Node.js,只会用require()加载模块,遇到 ES6
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢? 我们先来看一下深拷贝和浅
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti

热门文章

2000W 条数据的Oralce数据库SQL查询优化经验

最新文章

2000W 条数据的Oralce数据库SQL查询优化经验