迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

Webpack打包ES6和CommonJs混合React

发布时间: 2016-06-17 作者: 迹忆 浏览次数:

在学习React过程中一直都是用Webpack进行打包。刚开始的时候,对于基本的CommonJs的React语法使用基本的配置,运行起来也是没有问题的。不过最近在学习到React中props的...other时,这属于ES6和ES7中的特性,使用原先的基本配置已经不能满足要求了。必须对现有的配置进行升级。

下面我说一下我的React环境的升级过程。

最开始我们使用CommonJs语法时,只需使用最基本的配置即可:

# npm install babel-core babel-loader --save-dev

安装完成babel-core和babel-loader以后,下面是编写Webpack配置文件,默认文件名是webpack.config.js。当然也可以使用其他的文件名(例如wpconfig.js),只是在使用webpack命令时加上 --config参数:

# webpack --config wpconfig.js

配置文件内容如下

module.exports = {
    entry: {
        module: './src',
    } ,
    output:{
        path: './builds',
        filename: 'onmpw.js',
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                loader: 'babel',
             },
        ],
    }
};

如果你想在react代码中使用jsx,那么你必须安装babel-preset-react,然后修改webpack配置文件

# npm install babel-preset-react --save-dev

下面是配置文件部分内容

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react']
    }
}

接下来如果你想要在React中使用ES6语法,就要使你的环境支持ES6或者是ES2015

# npm install babel-preset-es2015 --save-dev

下面是配置文件部分内容

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react', 'es2015']
    }
}

最后,如果你想使你的环境支持一些ES7的试验特征,还可以继续如下的升级

# npm install babel-preset-stage-0 --save-dev

配置文件内容如下:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react', 'es2015', 'stage-0']
    }
}

针对上面的几种情况,下面奉上一段代码,包含了这几种情况。

var FancyCheckbox = React.createClass({
    render: function() {
        var { checked, ...other } = this.props;
        var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
        // `other` 包含 { onClick: console.log } 但 checked 属性除外
        return (
            <div {...other} className={fancyClass} />
        );
    }
});
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

最后,我们还需要注意。Babel并不能支持所有的ES6代码的单独编译,他需要一些运行环境的支持才可以实现。比较典型的是新的ES6内置的方法,像Set,Map和Promise等必须有polyfilled的支持。并且Babel的解析器的实现也需要一系列的辅助运行环境。安装polyfilled的方法如下

# npm install babel-polyfilled --save

同时,Babel直接将这些小的辅助工具的代码编译进你的代码中。这对于单一的小文件是没有问题的。但是如果你将这些和Webpack绑定的话,重复代码将会导致一个非常大的文件。鉴于这种情况,使用带有transform-runtime插件的babel-runtime包代替这些辅助工具是比较妥善的一种方式

# npm install babel-runtime --save
# npm install babel-plugin-transform-runtime --save-dev

当然了,安装完这些以后,同样需要升级我们的Webpack的配置文件,代码如下:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        plugins: ['transform-runtime'],
        presets: [ 'react', 'es2015', 'stage-0']
    }
}

好了,以上所有就是对一个Webpack打包React的几种情况所需要的环境的配置。希望对大家以后学习React有所帮助。

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: