webpack

200 阅读3分钟
  • 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
};
  • 只配置上面的信息存在的问题 打包后的文件

image.png

  • 问题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生成好了 image.png

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