這次我們來(lái)處理一下 解析 ES6 和 react 的需求
首先要安裝三個(gè)插件
yarn add babel-core babel-loader babel-preset-stage-1 babel-preset-env --dev
- babel-core 這個(gè)插件是 babel 編譯器的核心, 包含了 Node API 和 require 鉤子
- babel-loader 是具體的編譯插件
- babel-preset-env 是一個(gè)集成各種編譯插件的新插件, 以前我們有 babel-preset-es2015塞俱、babel-preset-es2016 等等亂七八糟的編譯插件, 現(xiàn)在一個(gè) babel-preset-env就搞定了 (但是不包括 polyfill 和 react)
裝好以后我們?nèi)バ薷南?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'
})
]
};
這里要詳細(xì)解釋超出我能力范圍了 只要大概了解一下就行
- module -> rules 這個(gè)數(shù)組里可以配置多個(gè)對(duì)象, 每個(gè)對(duì)象都是針對(duì)某種類型的文件應(yīng)用一個(gè) loader
- 這次我們?cè)?rules 里只配置了一個(gè)對(duì)象
- test 屬性使用正則指定了我們針對(duì)所有的 js 文件進(jìn)行處理
- exclude 屬性說(shuō)明了 node_modules 下的 js 文件不做處理
- use -> loader 指定了 babel-loader 這個(gè) loader 來(lái)處理 js 文件
- use -> options 設(shè)置了這個(gè) loader 運(yùn)用一個(gè)什么樣的方式來(lái)進(jìn)行處理 js 文件
那么 解析 ES6 的需求這里實(shí)際上已經(jīng)基本完成了
我們繼續(xù)處理下 react 語(yǔ)法 (jsx)
yarn add babel-preset-react --dev
看這個(gè)名字也知道是用來(lái)處理 react
然后我們?cè)傩薷南?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'
})
]
};
接著在我們的項(xiàng)目里安裝下 react 來(lái)驗(yàn)證
yarn add react react-dom
這次安裝沒(méi)加 --dev 這里提一下
加 --dev 是你開(kāi)發(fā)時(shí)候依賴的東西
不加 --dev 是你發(fā)布之后還依賴的東西
這種區(qū)別會(huì)在 package.json 里表現(xiàn)出來(lái) (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 的內(nèi)容 并把文件名改為 ./src/app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
接著可以運(yùn)行打包指令了
node_modules/.bin/webpack
然后用瀏覽器打開(kāi) ./dist/index.html 看看結(jié)果, 你應(yīng)該可以看到一行 "Hello, world!"
另外你有興趣的話可以去 ./dist/app.js 看看, jsx 語(yǔ)法也被翻譯為相應(yīng)的 ES2015 語(yǔ)法了(反正我懶得看)
下一次我們處理下 css/sass 的解析
