應(yīng)用場(chǎng)景
我們使用ES6語(yǔ)法的時(shí)候箱玷，我們發(fā)現(xiàn)在一些低版本的瀏覽器是沒有辦法兼容ES6的語(yǔ)法的撇眯，比如說IE瀏覽器無(wú)法識(shí)別promise和map方法谱仪，所以我們期望webpack幫助我們打包的時(shí)候蓄髓，可以將ES6的語(yǔ)法直接轉(zhuǎn)換成ES5的語(yǔ)法。
配置
我們現(xiàn)在要在IE瀏覽器中執(zhí)行下面的一段代碼：
const arr = [new promises(() => {}), new promises(() => {})];
arr.map(item => {
console.log(item);
});
安裝babel-loader
作用：在webpack和babel中間搭建了一座橋梁
我們首先要安裝babel-loader @babel/core
npm install --save-dev babel-loader @babel/core
然后在webpack中配置
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
其中exclude: /node_modules/指的是裹匙，如果我們遇到node_modules中的不適用babel-loader來進(jìn)行轉(zhuǎn)換
其實(shí)我們使用了babel-loader瑞凑，只是相當(dāng)于在webpack和babel中搭建起了一座橋梁，并沒有真正的實(shí)現(xiàn)將ES6轉(zhuǎn)換成ES5.
安裝@babel/preset-env
作用：將ES6的語(yǔ)法轉(zhuǎn)換成ES5的語(yǔ)法
因此我們還需要安裝@babel/preset-env,@babel/preset-env是用來做語(yǔ)法轉(zhuǎn)換的
安裝執(zhí)行命令
npm install --save @babel/preset-env
然后在loader中進(jìn)行相關(guān)的配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
},
]
}
安裝@babel/polyfill
將低版本瀏覽器中沒有的方法進(jìn)行補(bǔ)充
使用的方法就是我們?cè)谧铋_始執(zhí)行js文件的時(shí)候引入@babel/polyfill
import '@babel/polyfill';
const arr = [new promises(() => {}), new promises(() => {})];
arr.map(item => {
console.log(item);
});
我們發(fā)現(xiàn)概页，我們這樣直接進(jìn)行引入的時(shí)候籽御，我們很多沒有用到的ES6的特性也被打包了進(jìn)來，這樣會(huì)照成浪費(fèi)惰匙，我們期望技掏，我們用到什么就打包進(jìn)來什么，所以我們進(jìn)行下面的配置项鬼。
在loader中進(jìn)行配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env'],
{
useBuiltIns: 'usage'
}
]
}
}
]
}
useBuiltIns: 'usage'的配置用來 當(dāng)我們@babel/polyfill填充的時(shí)候哑梳，不是將所有的特性都填充進(jìn)來，而是填充我們使用過的特性
對(duì)UI庫(kù)或是類庫(kù)的babel配置
上面我們介紹的是對(duì)于業(yè)務(wù)代碼的webpack配置babel的情況绘盟，但是如果我們只是寫一個(gè)第三方的庫(kù)鸠真，按照上面的配置方案進(jìn)行配置會(huì)造成全局污染。那我們應(yīng)該怎么對(duì)這樣的場(chǎng)景進(jìn)行配置呢龄毡？
安裝transform-runtime和@babel/runtime
npm install -D @babel/plugin-transform-runtime
npm install -D @babel/runtime
在webpack中進(jìn)行相關(guān)的配置,在babel-loader進(jìn)行如下的配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: [
['@babel/plugin-transform-runtime'],
{
corejs: 2,
helpers: true,
regenerator: true,
useESModules: false
}
]
}
},
在上面的配置中我們?cè)O(shè)置了corejs: 2,這個(gè)時(shí)候進(jìn)行打包的時(shí)候我們會(huì)發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)弧哎，報(bào)錯(cuò)的具體意思缺少一個(gè)包，安裝了@babel/runtime-corejs2這個(gè)包
npm install -D @babel/runtime-corejs2
我們發(fā)現(xiàn)對(duì)于babel的option配置項(xiàng)是很多的稚虎，我們都在loader中進(jìn)行配置，會(huì)導(dǎo)致webpack的配置文件過長(zhǎng)的問題偎捎，所以我們可以在根路徑下創(chuàng)建一個(gè).bablerc的文件蠢终。具體的寫法
.babelrc文件
{
"plugins": [
["@babel/plugin-transform-runtime"],
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
}
React的打包
先安裝bable-preset-react，用來解析jsx的相關(guān)代碼
npm install -D @babel/preset-react
安裝react的框架
npm install react react-dom -D
在.babelrc進(jìn)行配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "67"
},
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
]
}
index.js的編碼方式
import '@babel/polyfill';
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>22222</div>;
}
}
ReactDom.render(<App />, document.getElementById('root'));
presets:執(zhí)行的轉(zhuǎn)換順序是從下到上茴她，從右到左
