Babel实战
在阅读本文之前，建议去看看webpack中使用babel和babel优化
接下来，用一个实战来巩固一下之前所学的Babel知识，实战需求如下：
- 使用 const/let
- 使用Array.from
- 使用数组的includes方法
- 使用结构赋值
- 使用decorators装饰器
- 使用 Generator 函数
- 使用Promise
- 使用展开运算符
实战源码如下：
let name = 'babel';
const PI = 3.14;
Array.from([]);
[1, 2, 3, 4].includes(2);
let person = {
sex: '也'
}
const {
sex } = person;
@log
class A {
}
function log(target) {
console.log(target)
}
function* func() {
yield 'babel';
}
let _promiseA = new Promise((resolver) => {
});
let _promiseB = new Promise((resolver) => {
});
let obj = {
name: 'babel'
}
let newObj = {
...obj,
name: 'webpack',
job: 'build'
};
babel-loader配置如下：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
}
]
}
}
babel.config.json配置如下：
{
"presets": [
[
"@babel/env",
{
"targets": {
"ie": "10",
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"@babel/plugin-transform-runtime"
]
}
其中@babel/plugin-proposal-decorators和@babel/plugin-proposal-class-properties插件是用来支持@log这种装饰器写法。更多关于Babel的介绍和使用方法请前往babel官网https://babeljs.io/进行查阅。
本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/babel.zip