Skip to content

Files

Latest commit

4027d32 · Mar 16, 2020

History

History

chapter03

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Mar 1, 2020
Mar 1, 2020
Mar 11, 2020
Mar 1, 2020
Mar 8, 2020
Mar 1, 2020

README.md

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-loaderfile-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、小结

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