跳到主要内容

webpack babel 的基本使用

处理ES6语法

我们先用ES6写一些代码

const name = 'Alan';
const list = [1, 8, 4, 6];

const resultList = list.filter(item => item > 5);

new Promise(() => {
console.log('666');
})

console.log(resultList);

npm run build打包看一下chrome效果

image-20200520142019038

奈何这个世界上还有IE这种东西😣,IE上看一下效果

image-20200520142207197

可以看一下报错的地方:

eval("const name = 'Alan';\r\nconst list = [1, 8, 4, 6];\r\n\r\nconst resultList = list.filter(item => item > 5);\r\n\r\nnew Promise(() => {\r\n  console.log('666');\r\n})\r\n\r\nconsole.log(resultList);\r\n\n\n//# sourceURL=webpack:///./src/index.js?");

看来IE是识别不了ES6语法的,那我们这里就要借助babel处理了。

npm install --save-dev babel-loader @babel/core @babel/preset-env

@babel/preset-env把ES6转化为ES5

@babel/corebabel核心内容

配置webpack

{
test: /\.js$/,
exclude: /node_modules/, // 不对node_modules下的js文件处理
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},

再打包看一看

image-20200520143428061

打包后的index.js文件

var name = 'Alan';
var list = [1, 8, 4, 6];
var resultList = list.filter(function (item) {
return item > 5;
});
new Promise(function () {
console.log('666');
});
console.log(resultList);

虽然处理了一些ES6语法(箭头函数,const),但是像filter和Promise还是没有处理的。

这里就要使用@babel-polyfill,它会模拟一个ES5环境

npm install --save @babel/polyfill

安装后在文件开头引入就可以了

import '@babel/polyfill';

const name = 'Alan';
const list = [1, 8, 4, 6];

const resultList = list.filter(item => item > 5);

new Promise(() => {
console.log('666');
})

console.log(resultList);

再次打包运行

image-20200520144125415

虽然效果完成了,但是对比一下没使用@babel/polyfill和使用了@babel/polyfill打包后的大小😮

image-20200520144511050

就引入了一个@babel-polyfill,体积就增加了这么多?

其实是因为@babel-polyfill模拟了所有的ES5环境,而我们这里只使用了Promise和filter,所以我们可以通过配置useBuiltIns让它只模拟我们使用到的。

配置了useBuiltIns后,它是会自动帮我们引入@babel/polyfill所以这里我们无需再引入。

{
test: /\.js$/,
exclude: /node_modules/, // 不对node_modules下的js文件处理
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
useBuiltIns: 'usage'
}]]
}
},
main.js   68.6 KiB    main  [emitted]  main

再看一下打包后的文件小了很多有没有?

babel的配置是可以单独放在.babelrc文件中的,直接将options中的内容放到.babelrc目录下即可

{
"presets": [["@babel/preset-env", {
"useBuiltIns": "usage"
}]]
}

使用@babel/preset-react打包React文件

npm install --save-dev @babel/preset-react

{% tabs 4 %}

{
"presets": [["@babel/preset-env", {
"useBuiltIns": "usage"
}],
"@babel/preset-react"
]
}
import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
render() {
return (
<div>Hello React</div>
);
}
}

ReactDom.render(<App />, document.getElementById('root'));

{% endtabs %}

这里有一点需要注意一下,presets顺序是从后往前的,和css-loader一样,也就是js文件是先被@babel/preset-react处理的再被@babel/preset-env处理的。

总结使用的babel

@babel/preset-react处理react的jsx语法

@babel-polyfill处理低版本浏览器无法处理的语法,类似Promise、Array.from、Object.assign

@babel/preset-env把ES6转化为ES5

@babel/corebabel核心内容

useBuiltIns:usage按需引入

{% note link, 更多配置参考babel官网 %}