React +ES6 +Webpack入门

React +ES6 +Webpack入门

React已成为前端当下最热门的前端框架之一 ， 其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利。其优秀的特性不再赘述。本文将详细的记录react babel webpack的环境搭建，以及搭建的过程中遇到的一些坑。

一、新建React项目

1、如图为新建react项目结构，其中 entry.js放置react入口代码，index.js放置react组件代码，assets文件是webpack打包之后生成文件的存放地址。

由于react代码需要jsx来写，所以我们修改编辑器里的配置。我使用的是mac版的webstorm，在如下图地方修改jsx提示配置

首先你得安装npm 同时命令行输入

npm install
npm init

新建node_modules

2、输入如下命令安装react模块

npm i --save react

由于react升级后把reactDOM独立出来 ，所以我们还需要安装react-dom

npm install react-dom --save-dev

具体react代码在安装完webpack后介绍

二、安装webpack

1、什么是Webpack？

事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包

2、安装webpack

全局安装

sudo npm install -g webpack

本项目安装

npm install webpack --save-dev

3、webpack配置

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

在根目录新建js文件 webpack.config.js

文件内容大概如下

/**
 * Created by mac on 16/7/14.
 */
var webpack = require(‘webpack‘);
var path = require(‘path‘);

module.exports = {
    //页面入口文件配置
    entry: {
        index: [
            ‘webpack-dev-server/client?http://localhost:5000‘,
            ‘webpack/hot/only-dev-server‘,
            ‘./js/entry.js‘
        ]
    },
    //入口文件输出配置
    output: {
        path: __dirname + ‘/assets/‘,
        filename: ‘bundle.js‘
    },
    module: {
        //加载器配置
        loaders: [
            {
                test: /\.css$/,
                loader: ‘style-loader!css-loader‘
            },

            {
                test: /\.js$/,
                loader: ‘jsx-loader?harmony‘
            },
            {
                test: /\.(png|jpg)$/,
                loader: ‘url-loader?limit=8192‘
            },
            {
                test: /\.js|jsx$/,
                loaders: [‘react-hot‘, ‘babel?presets[]=es2015,presets[]=react,presets[]=stage-0‘],
                include: path.join(__dirname, ‘js‘)
            }
        ]
    },
    //其它解决方案配置
    resolve: {
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘]
    },
    //插件项
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

这里对Webpack的打包行为做了配置，主要分为几个部分：

entry：指定打包的入口文件，每有一个键值对，就是一个入口文件

output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称

resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全

module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是 .js 结尾的文件都是用 babel-loader 做处理，而 .jsx 结尾的文件会先经过 jsx-loader 处理，然后经过 babel-loader 处理。当然这些loader也需要通过 npm install 安装

plugins: 这里定义了需要使用的插件，这里使用了react-hot会在之后介绍

安装loader示例

npm install jsx-loader --save-dev

在我的webpack.config文件中，文件入口为 js/entry.js，entry中的index数组为之后使用的react-hot配置，若不使用插件则为

entry: {
        index: ‘./js/entry.js‘
    },

打包后的出口为assets/bundle.js

三、安装babel

1、为什么babel

能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。

2、安装babel

npm install -g babel

完成后可用命令sudo babel --help查看是否安装成功

Babel提供babel-cli工具，用于命令行转码。

npm install babel-cli --save-dev

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。

npm install babel-core --save-dev

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 首先新建.babelrc文件
文件默认如下

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

之后在.babelrc文件中加入配置

{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": []
  }

这时在webpack.config文件中loader中加入配置,让打包时加载babel

           {
             test: /\.js|jsx$/, loaders: [‘babel?presets[]=es2015,presets[]=react,presets[]=stage-0‘]
            },

同时安装babel-loader

npm install babel-loader --save-dev

注意！这里presets的顺序要和.babelrc的顺序一致

未完～