# 八.处理 js 语法及校验
# 1.es6 语法转换成 es5
# 安装
yarn add babel babel-loader @babel/core @babel/preset-env -D
1
# webpack.config.js
{
"test": /\.js$/,
"use": {
"loader": "babel-loader",
"options": {
"presets": ["@babel/preset-env"]
}
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# index.js
let fn = () => {
console.log("log")
}
fn()
1
2
3
4
2
3
4
# 安装
yarn add @babel/plugin-proposal-class-properties -D
1
# webpack.config.js
{
"test": /\.js$/,
"use": {
"loader": "babel-loader",
"options": {
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 安装
yarn add @babel/plugin-proposal-decoreators -D
1
# 2.es7 语法转换成 es5
# 安装
package.json
"dependencies": {
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/polyfill": "^7.4.0",
"@babel/runtime": "^7.4.2"
}
1
2
3
4
5
2
3
4
5
# 文件
1.src/a.js
module.exports = "123"
require("@babel/polyfill")
class B {}
function* gen(params) {
yield 1
}
console.log(gen().next())
"aaa".includes("a")
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2.src/index.js
···
require("./a.js");
···
1
2
3
2
3
# 配置
webpack.config.js
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
"@babel/plugin-transform-runtime"
]
}
},
include: path.resolve(__dirname, "src"),
exclude: /node_modules/
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 打包
npm run build
1
可以看到 es7 语法转换为 es5 了
# 3.eslint
# 安装
package.json(开发依赖)
···
"eslint": "^5.15.3",
"eslint-loader": "^2.1.2",
···
1
2
3
4
2
3
4
# 文件
eslint 官网下载 eslintrc.json (opens new window)
然后放到根目录下（注意前面加.）
# 配置
webpack.config.js
{
test: /\.js$/,
use: {
loader: "eslint-loader",
options: {
enforce: "pre"
}
}
},
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 打包
npm run build
1
可以看到有报错的，提示哪里有错误（这个就是 eslint 的错误提示）