webpack

• add-asset-html-webpack-plugin把dll文件添加到html的中，通过script标签引入的方式，不要手动的引入
• workbox-webpack-plugin service-worker ,当服务器崩了的时候，运行这个
• 生成eslint配置文件，运行`npx exlint --init
• eslint安装步骤

1. cnpm i eslint -D
2. 生成eslint配置文件 npx eslint --init
3. 如果要配合webpack，主要是为了在运行时，把错误报在浏览器上
4. 如果为了提高性能，不要在每次改动页面的时候都去检查，那么一般都是配置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生成好了

通过配置@babel/plugin-transform-runtime，我们其实也可以不配置"useBuiltIns": "usage"，"corejs": 3,因为都是通过@babel/plugin-transform-runtime，去使用的包，里面都集成好了