1，core-js：将我们的代码编译后成为浏览器可执行的代码，其中主要处理 ES 的API，他是运行的一个API 补丁包集合, 也可以理解为：它是JavaScript标准库的 polyfill。
官方库对他介绍的形容： 1.1它支持最新的 ECMAScript 标准 1.2它支持ECMAScript 标准库提案 1.3它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关） 1.4它最大限度的模块化：你能仅仅加载你想要使用的功能 1.5它能够不污染全局命名空间 1.6它和babel紧密集成：这能够优化core-js的导入 1.7它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式
2，plugin-transform-runtime
大致有3大作用： 2.1 自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代； 2.2 当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable; 2.3 当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；
3. @babel/plugin-proposal-class-properties 和 @babel/plugin-proposal-object-rest-spread
plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码
4. 如下代码是使用core-js 处理浏览器兼容性问题的配置：
需要先 安装依赖： npm i babel-loader @babel/preset-env core-js @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime -D npm i @babel/runtime
const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
// npx webpack-dev-server
module.exports = {
entry: './src/js/main.js', // 文件入口
output: {
filename: 'js/bundle.js', // 生成文件
path: resolve(__dirname, 'dist'), // 生成路径
clean: true
},
module: {
rules: [{
test: /\.((c|le)ss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugin: [
// postcss 插件
['postcss-preset-env'],
{
// 其他选贼
}
]
}
}
},
'less-loader'
]
}, {
test: /\.(png|jpg|avg|gif)$/,
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: 'imgs/[hash:10][ext][query]'
}
}, {
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.(mp4|ttf|waff2?)$/,
type: 'asset/resource',
generator: {
filename: 'media/[hash:8].[ext][query]'
}
}, {
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
targets: {
chrome: '58',
firefox: '60',
ie: '8',
safari: '10',
edge: '15'
}
}
]
],
plugins: [
'@babel/plugin-transform-runtime',
// plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
}),
new ESLintWebpackPlugin({
context: resolve(__dirname, 'src'),
fix: true
})
],
mode: 'development',
devServer: {
port: 3000,
compress: true,
open: true,
watchFiles: [
'./src/index.html'
]
}
}
相关链接
您阅读本篇文章共花了：
发表评论