这次我们来处理一下 解析 ES6 和 react 的需求
首先要安装三个插件
yarn add babel-core babel-loader babel-preset-stage-1 babel-preset-env --dev
- babel-core 这个插件是 babel 编译器的核心, 包含了 Node API 和 require 钩子
- babel-loader 是具体的编译插件
- babel-preset-env 是一个集成各种编译插件的新插件, 以前我们有 babel-preset-es2015、babel-preset-es2016 等等乱七八糟的编译插件, 现在一个 babel-preset-env就搞定了 (但是不包括 polyfill 和 react)
装好以后我们去修改下 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /(node_modules)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['env', 'stage-1', 'react']
+ }
+ }
+ }
+ ]
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
})
]
};
这里要详细解释超出我能力范围了 只要大概了解一下就行
- module -> rules 这个数组里可以配置多个对象, 每个对象都是针对某种类型的文件应用一个 loader
- 这次我们在 rules 里只配置了一个对象
- test 属性使用正则指定了我们针对所有的 js 文件进行处理
- exclude 属性说明了 node_modules 下的 js 文件不做处理
- use -> loader 指定了 babel-loader 这个 loader 来处理 js 文件
- use -> options 设置了这个 loader 运用一个什么样的方式来进行处理 js 文件
那么 解析 ES6 的需求这里实际上已经基本完成了
我们继续处理下 react 语法 (jsx)
yarn add babel-preset-react --dev
看这个名字也知道是用来处理 react
然后我们再修改下 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
+ presets: ['env', 'es2015', 'react']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
})
]
};
接着在我们的项目里安装下 react 来验证
yarn add react react-dom
这次安装没加 --dev 这里提一下
加 --dev 是你开发时候依赖的东西
不加 --dev 是你发布之后还依赖的东西
这种区别会在 package.json 里表现出来 (dependencies 和 devDependencies)
修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
+ entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
+ test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
})
]
};
我们修改了入口文件的后缀名和 module -> rules -> test 里的文件后缀名
修改 ./src/app.js 的内容 并把文件名改为 ./src/app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
接着可以运行打包指令了
node_modules/.bin/webpack
然后用浏览器打开 ./dist/index.html 看看结果, 你应该可以看到一行 "Hello, world!"
另外你有兴趣的话可以去 ./dist/app.js 看看, jsx 语法也被翻译为相应的 ES2015 语法了(反正我懒得看)
下一次我们处理下 css/sass 的解析
