es6 混合commjs_Webpack打包ES6和CommonJs混合React

在学习React过程中一直都是用ES6和ES7中的特性，使用原先的基本配置已经不能满足要求了。必须对现有的配置进行升级。

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

最开始我们使用

# 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 (

);

}

});

ReactDOM.render(

Hello world!

,

document.getElementById('example')

);

最后，我们还需要注意。

# 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有所帮助。