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 官网
来源: http://www.jianshu.com/p/b88de6996b18