Webpack打包ES6和CommonJs混合React的方法
本篇内容主要讲解“Webpack打包ES6和CommonJs混合React的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Webpack打包ES6和CommonJs混合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 (
);
}
});
ReactDOM.render(
Hello world!
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打包ES6和CommonJs混合React的方法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站题目:Webpack打包ES6和CommonJs混合React的方法
文章来源:http://ybzwz.com/article/pppejc.html