10_webpack_polyfill

 

认识polyfill

polyfill可以帮助我们更好的去使用javascript

比如我们使用了一些语法特性(例如：Promise、Generator、Symbol)等以及实例方法例如(Array.prototype.includes等)

但是某些浏览器压根不认识这些特性，必然会报错；

那么我们就可以使用polyfill来填充或者说打一个补丁，那么就会包含该特性了

 

如何使用polyfill

babel7.4.0之前，可以使用@babel/polyfill的包，但是该包现在已经不推荐使用了

　　如果你在旧版本的话就执行npm i @babel/polyfill   这里不要跟-D

babel7.4.0之后，可以通过单独引入core-js和regenerator-runtime来完成polyfill的使用
　　npm i core-js regenerator-runtime  注意这里不用加-D

使用：

//bable.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      // false 不使用任何的polyfill
      //以下的两个值可能会发生冲突(加入第三方库如果实现了关于polyfill相关的东西，你再实现 会有冲突的问题)，解决：在babel-loader中加入exclude属性
      // usage 根据源代码需要哪些polyfil就引入相关的api
      // entry只要是浏览器需要的polyfill都引入(不是根据源代码应用哪些polyfill)
      useBuiltIns: "usage",
　　　 corejs:"3"

    }]
  ]
}

解决冲突

      {
        test: /\.js$/,
        exclude: /node_modules/,//排除哪些东西不使用babel的
        use: {
          loader: 'babel-loader',
        }
      }

需要注意的几个点：

这里需要注意一点的是：useBuiltIns为usage时需要声明core-js的版本为3
因为默认情况下他使用的是2版本的，会报错

useBuiltIns为entry时默认是不给你打补丁的，需要在入口文件中引入下面两个文件
　　import 'core-js/stable';
　　import 'regenerator-runtime/runtime'

 

认识Plugin-transform-runtime

在前面我们使用的polyfill，默认情况是添加的所有特性都是全局的

　　如果我们正在编写一个工具库，这个工具库需要使用polyfill
　　别人在使用我们工具时，工具库通过polyfill添加的特性，可能会污染他们的代码
　　所以，当编写工具时，babel更推荐我们使用一个插件：@babel/plugin-transform-runtime来完成polyfill的功能

1.安装
npm i @babel/plugin-transform-runtime -D

 

 

 

 npm i @babel/runtime-corejs3

2.应用plugin

babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env"
  ],
  //默认就是usage
  plugins: [
    ["@babel/plugin-transform-runtime", {
      corejs: 3
    }]
  ]
}

 

 

使用ts-loader

npm i ts-loader

局部安装typescript
npm i typescript

初始化一个tsconfig.json
tsc --init

配置ts-loader

 {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }

ts-loader本质上是依赖于typescript(typescript Compiler)

 

Babel转换TS代码

除了使用ts-loader转换ts代码，还可以使用babel进行转换

babel不依赖typescriptCompiler

我们可以直接使用插件：@babel/transform-typescript;

但是更推荐使用preset:@babel/preset-typescript

安装：@babel/preset-typescript

npm i @babel/preset-typescript -D

配置

{
        test: /\.ts$/,
        //本质上是依赖于typescript(typescript Compiler)
        exclude: /node_modules/,
        use: 'babel-loader'
      },

 

module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "usage",
      corejs: "3"
    }],
    ["@babel/preset-typescript"]
  ],
}

 

ts-loader和babel-loader选择

babel-loader:优点polyfill，缺点不会对语法进行检查

ts-loader:优点有语法检查，缺点不能应用polyfill填充api

那么到底该如何选择babel呢？

我们可以在package.json中的scripts配置一个脚本如

 "scripts": {"type-check": "tsc --noEmit" //--noEmit对项目进行检测，不需要进行实际的输出(构建)
  },

然后我们的babel依然选择babel-loader

那么我们在构建项目之前可以先使用脚本检测一下代码，再进行构建

 

如果觉得构建之前还需要进行检测麻烦的话也可以这样子配置

  "scripts": {
    "build": "tsc --noEmit&webpack --config ./wp.config.js"
  },

 

或者也可以在参数后面加上watch
检测的时候 实时的监听源代码，如果发生改变会重新检测源代码

  "scripts": {
    "build": "webpack --config ./wp.config.js",
    "type-check": "tsc --noEmit --watch"
  },