add-asset-html-webpack-plugin
把dll文件添加到html的中,通过script标签引入的方式,不要手动的引入workbox-webpack-plugin
service-worker ,当服务器崩了的时候,运行这个- 生成eslint配置文件,运行`npx exlint --init
- eslint安装步骤
- cnpm i eslint -D
- 生成eslint配置文件 npx eslint --init
- 如果要配合webpack,主要是为了在运行时,把错误报在浏览器上
- 如果为了提高性能,不要在每次改动页面的时候都去检查,那么一般都是配置git,在提交的时候,去验证
babel配置详解,针对babel7.4以后的版本
- 安装插件,
@babel/cli
,@babel/core,@babel/preset-env
@babel/cli主要是提供一些命令行相关的功能,@babel/core,才是babel的核心,@babel/preset-env主要针对es6+的语法编译成es5的语法,提供一些预设的函数,默认去编译
- 针对一些实例方法,(Promise,includes等等)babel默认不能去打包的,需要安装
core-js
包,这里面包含了所有es6以上的函数,当安装core-js默认就安装了regenerator-runtime
所以不用再次安装
babel.config.js文件配置
// 配置预设
const presets = [
[
"@babel/env",
{
targets: {
edge: "10",
chrome: "64",
firefox: "60",
safari: "11.1"
},
"useBuiltIns": "usage", //按需添加,只加载用到的包
"corejs": 3, //指定corejs的版本,必须设置,不然要提示警告信息,找不到corejs
}
]
]
module.exports = {
plugins
};
- 只配置上面的信息存在的问题 打包后的文件
- 问题1. 一下实例都是挂载到原型中的,promise,includes,容易造成全局污染
- 问题2. 如果多个文件都引入了同一个方法,或者包,那么都会创建_classCallCheck这些方法,造成包过大
通过@babel/plugin-transform-runtime
解决上面的问题
- @babel/plugin-transform-runtime在开发环境中使用
- @babel/runtime 主要是引入@babel/plugin-transform-runtime打包后,需要引入的@babel/runtime中的文件
@babel/runtime
在生产环境中使用,@babel/plugin-transform-runtime
在开发环境中使用
// 配置plugin
const presets = [
[
"@babel/env", 处理es5+的语法
{
targets: {
edge: "10",
chrome: "64",
firefox: "60",
safari: "11.1"
},
"useBuiltIns": "usage", //按需添加,只加载用到的包
"corejs": 3, //指定corejs的版本,必须设置,不然要提示警告信息,找不到corejs
}
]
]
// 如果配置@babel/plugin-transform-runtime,那么useBuiltIns和corejs可以不用配置了,
//因为@babel/plugin-transform-runtime里面有这些方法
const plugins = [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3 // 这里指定的是`@babel/runtime`这个包新版本,也就是corejs配置3时,
//需安装@babel/runtime-corejs3包名
}
// {
// "absoluteRuntime": false,
// "corejs": 3,
// "version": "^7.15.4"
// }
// "@vue/babel-plugin-transform-vue-jsx"
]
]
module.exports = {
presets,
plugins
};
- 打包后的文件都是通过@babel/runtime-corejs3去引入的,不会造成全局污染,方法没有挂载到原型中
- 也不存在通过使用一个函数,或者包时,都生成新的babel执行函数,都走@babel/runtime-corejs3生成好了