1. 建立 babel
可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。
如果还不理解的话，可以看我这篇文章 babel 入门指南。
要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。
运行下面的命令。
$ npm install --save-dev babel-core babel-preset-react babel-preset-env
创建 .babelrc 文件。
{
"presets": ["env", "react"]
}
// 以下为vue项目中的`.babelrc` 文件
{
"presets": [
[
"env",
{
"modules": false
}
],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
2. 在 webpack 使用 babel-loader
最后我们需要在 webpack 中使用一个 loader 来转化 react、vue 的代码。
首先，安装。
$ npm install --save-dev babel-loader
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
...
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
},
// 这两行是处理 react 相关的内容
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
}
// 以下为vue项目中
// {
// test: /\.js$/,
// loader: 'babel-loader',
//include: [resolve('src'), resolve('test')]
//},
};
