React 【ES2015】+ Babel + Gulp + Webpack

React 【ES2015】+ Babel + Gulp + Webpack

varwebpack=require("webpack");
varcommonsPlugin=newwebpack.optimize.CommonsChunkPlugin("common.js");

module.exports={
	entry:{//入口文件
		routes:"./src/routes.js"
	},output:{//打包输出
		path:__dirname,filename:"[name].entry.js"
	},resolve:{//定义模块路径
		extensions:['','.js','jsx']
	},externals:{
'React':'window.React'
},module:{//处理模块
		loaders:[{
			test:/.js$/,loader:'babel-loader',query:{
				presets:['es2015','react']
			}
		},{
			test:/.jsx$/,'react']
			}
		}]
	},plugins:[commonsPlugin]
};

package.json

{
"name":"cnode.js","version":"1.0.0","description":"","main":"index.js","scripts":{
"test":"echo"Error:notestspecified"&&exit1"
},"author":"jso0","license":"ISC","dependencies":{
"babel-core":"^6.5.2","babel-loader":"^6.2.2","bootstrap":"^3.3.6","gulp":"^3.9.1","gulp-webpack":"^1.5.0","localStorage":"^1.0.3","react":"^0.14.7","react-bootstrap":"^0.28.3","react-dom":"^0.14.7","react-router":"^2.0.0","webpack":"^1.12.13"
},"devDependencies":{
"babel-preset-es2015":"^6.5.0","babel-preset-react":"^6.5.0"
}
}

参考：

babel 为什么没能识别我 js 文件中的 jsx 语法?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!