转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack的js兼容性处理
js兼容性检查主要用到的
loader有
babel-loader@8.3.0
@babel/core@7.14.6
@babel/preset-env@7.14.7基本语法兼容性处理
@babel/polyfill@7.12.1全部js兼容性处理，缺点是无法按需加载兼容函数，而是全量加载，打包的 js 文件很大，
core-js@3.32.1全部js兼容性处理，可以按需加载兼容函数
兼容性处理的原理是打包后的 js 文件中会将不兼容的 js 函数、格式、命名规则等转换为可以多浏览器兼容的 js 代码。
一、最终配置示例
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/js/index.js',
// 输出
output: {
// 输出文件名
filename: 'js/built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 @babel/preset-env
问题：只能转换基本语法，如promise不能转换
2．全部js兼容性处理 --> @babel/polvfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
[
"@babel/preset-env",
{
// 按需加载
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
],
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
}),
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
};
三、全部js兼容性处理，全量加载兼容函数时的 index.js 文件和webpack配置
/*
使用全量加载兼容函数的形式时的index.js
路径： ./js/index.js
*/
// 全量加载无需修改 webpack的配置文件，
// 仅需要在入口 index.js 中引入 '@babel/polyfill'，并安装@babel/preset-env 包
import '@babel/polyfill'
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定时器被执行……')
resolve();
}, 1000)
})
console.log(promise);
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
module.exports = {
……
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 @babel/preset-env
问题：只能转换基本语法，如promise不能转换
2．全部js兼容性处理 --> @babel/polvfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [ "@babel/preset-env", ]
}
},
],
},
// plugins的配置
plugins: [
……
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
};
四、全部js兼容性处理，按需加载兼容函数时的 index.js 文件和webpack配置
/*
使用按需加载兼容函数的形式时的index.js
路径： ./js/index.js
*/
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定时器被执行……')
resolve();
}, 1000)
})
console.log(promise);
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
module.exports = {
……
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 @babel/preset-env
问题：只能转换基本语法，如promise不能转换
2．全部js兼容性处理 --> @babel/polvfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
[
"@babel/preset-env",
{
// 按需加载
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
],
},
// plugins的配置
plugins: [
……
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
};
五、安装需要loader
# 安装需要的loader
> npm i babel-loader@8.3.0 @babel/core@7.14.6 @babel/preset-env@7.14.7 core-js@3.32.1 -D
六、运行
> npx webpack