hooyantsing's Blog

P16 js兼容性处理eslint

字数统计: 644阅读时长: 3 min
2020/11/30

尚硅谷2020最新版Webpack5实战教程

#### 步骤

共同的依赖
1
npm i babel-loader @babel/core -D
1.基本js兼容性处理
  • 基本js兼容性处理 –> @babel/preset-env

  • 问题:只能转换基本的语法,如promise不能转换

下载包:

1
npm i @babel/preset-env -D

编写配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1. 基本js兼容性处理 --> @babel/preset-env
问题:只能转换基本的语法,如promise不能转换
*/
{
test: /\.js$/,
// 防止转换第三方库
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设:指示 babel 做怎么样的兼容性处理
presets: ['@babel/preset-env']
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
}
2.全部js兼容性处理
  • 全部js兼容性处理 –> @babel/polyfill
  • 问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大

下载包:

1
npm i @babel/polyfill -D

只需要在webpack执行入口js文件内引入:

1
import '@babel/polyfill'
3.按需加载
  • 需要做兼容性处理的就做:按需加载 –> corejs

下载包:

1
npm i core-js -D

@babel/core7以上版本,还需要下载 @babel/plugin-transform-runtime

1
npm i @babel/plugin-transform-runtime -D

编写配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1. 基本js兼容性处理 --> @babel/preset-env
问题:只能转换基本的语法,如promise不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大
3. 需要做兼容性处理的就做:按需加载 --> core-js
*/
{
test: /\.js$/,
// 防止转换第三方库
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: "60",
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
//利用 @babel/plugin-transform-runtime 插件还能以沙箱垫片的方式防止污染全局, 并抽离公共的 helper function , 以节省代码的冗余
"plugins": ["@babel/plugin-transform-runtime"]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
}
CATALOG
  1. 1. #### 步骤
    1. 1.1. 共同的依赖
    2. 1.2. 1.基本js兼容性处理
    3. 1.3. 2.全部js兼容性处理
    4. 1.4. 3.按需加载