3、webpack从0到1-使用babel打包

Ewall

发布于 2020-03-20 04:11:39

1.4K00

代码可运行

文章被收录于专栏：vue学习vue学习

运行总次数：0

代码可运行

webpack从0到1-使用babel打包

讲下webpack中的loaders的概念，然后结合使用babel-loader来对项目中的es6语法做下转换。 git仓库：webpack-demo

1、什么是loaders？

先看官网对Loaders的解释：webpack enables use of loaders to preprocess files。
简单一点来说就是一个可以帮我们处理文件的东西，比如一个js文件，在webpack打包的时候看到这个js文件就会走我们定义的比如接下来要说的babel-loader，给它转化一下，然后吐出来的就是一个纯es5语法的js文件了，大概就是起了这么一个作用。
所以呢，就有很多的loader，用来处理图片的file-loader，用来处理css文件的style-loader，file-loader也可以处理excel文件啊等等。

2、安装babel

接着上章来，复制一封chapter2的文件重命名为chapter3,进入该目录，开始安装babel。其实你可以照着去babel官网照着它的安装教程来啊（使用场景选webpack），我这边其实就是再复述一遍过程。

$ cd chapter3
$ npm install babel-loader @babel/core @babel/preset-env --save-dev

这样我们的package.json中的依赖就增加了这么几行，这样我们就安装成功了。

{
...
 "devDependencies": {
+   "@babel/core": "^7.8.4",
+   "@babel/preset-env": "^7.8.4",
+   "babel-loader": "^8.0.6",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
...
}

3、使用babel打包

ok，然后进入到我们的webpack.config.js文件中，接下来我们要将babel-loader添加到module的loaders列表中。
不要问为什么要这么写，webpack就是这样定义的，这就是它使用loader的格式。不信你可以自己去看官网上它是怎么使用loader的。

  ...
  // 使用loaders的列表
  module: {
    // 定义规则
    rules: [
      {
        // 这是一个正则，所有以js结尾的文件都要给我过这里！！
        test: /\.js$/,
        // 除了node_modules下的（真香）
        exclude: /(node_modules|bower_components)/,
        // 使用babel-loader，options是它的一些配置项
        use: {
          loader: "babel-loader",
          // "@babel/preset-env"这个东西是babel提供给自己用的插件
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
  ...

配置文件写完了，然后我们就可以使用命令开始打包了：

$ npm run build

对比chapter2之前打包后生产的dist/main.js文件，我们确实可以看到各模块内容中的es6语法都转换为es5语法了。

不使用babel打包：

使用babel打包后：

4、babel-polyfill

到了这里你以为就完了吧，想舒适的使用方便又快捷的es6语法哪里是这么简单的事情哦！上文安装的babel-loader可以转，但是不支持把所有的es6转换为es5，比如一些promise啊、Array.from这些语法啊，babel-loader就不能处理，所以babel就又提供了一个babel-polyfill包。
babel-polyfill简单点理解就是补充了babel的转换能力，为当前的环境提供一个垫片（很高深的词汇，牛逼了），ok，那接下来就是谈如何使用的问题了。
如何使用babel官网都有写，我这里大概讲一下。首先npm安装这个包，要走--save。

$ npm install --save @babel/polyfill

第一种方式你可以在所需的js文件开头可以import "@babel/polyfill"引入这个文件。第二种方式也就是这个项目中我们会用到的方式，加个useBuiltIns: "usage"即可。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
+               {
+                  // 添加babel-polyfill
+                  useBuiltIns: "usage"
+                }
              ]
            ]
          }
        }
      }
    ]
  }
};

然后输入npm run build打包，就ok了。webpack中使用polyfill有几种方式，各种异同大家可以去官网了解下。

5、关于core-js

当你成功的完成了上面的配置步骤，能正常打包也能在浏览器中正常显示，那么我们配置的babel基本能满足你大部分的开发需求了，但是当我们打包的时候应该会碰到几个问题。
第一个就是每次我们打包的时候，虽然打包成功了，但是会看到有warning警告。

阅读并查阅babel官方文档以后发现原来在Babel 7.4.0以后，@babel/polyfill这个包就会被移除了。官方叫我们直接使用core-js来代替@babel/polyfill的作用。
所以我们需要改点东西。先在package.json的把@babel/polyfill移除（仓库代码里为了做演示我就没移除了），并安装core-js包。

$ npm install core-js@3 --save

  ...
  "dependencies": {
-   "@babel/polyfill": "^7.8.3"
+   "core-js": "^3.6.4"
  }
  ...

参考文档修改一下webpack.config.js配置文件，这个很简单，加一行代码就可以了。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
               {
                  // 添加babel-polyfill
                  useBuiltIns: "usage",
+                 corejs: { version: 3, proposals: true }
                }
              ]
            ]
          }
        }
      }
    ]
  }
};

4、小结

这章我们了解了下webpack的loaders，然后使用babel实践了一下，到了这里大家应该对webpack是干什么的，loader是个啥有了一定了解了。
总而言之，用一个牛逼一点的概念来说就是赋能，有了这些loader来处理各种各样的文件，webpack变得强大了，在webpack里定义了相应loader以后，就能让webpack认识并处理它们了。
babel不建议我们继续使用@babel/polyfill这个垫片了，推荐直接安装core-js包。
loaders还没完，常用的还是的说说，下节讲下如何处理图片资源。
参考链接：
- babel官网
- webpack官网