webpack 学习笔记：使用 babel（上）

使用 webpack 直接解析下面的文件会出问题。

class Counter extends HTMLElement {
    x = 0;

    clicked() {
        this.x++
        window.requestAnimationFrame(this.render.bind(this))
    }

    constructor() {
        super()
        this.onclick = this.clicked.bind(this)
        this.x = 0
    }

    connectedCallback() {
        this.render()
    }

    render() {
        this.textContent = this.x.toString()
    }
}

window.customElements.define('num-counter', Counter)

报错信息如下：

$ npx webpack --watch

webpack is watching the files…

Hash: d8bc5ae1b88c0918c1c1
Version: webpack 4.44.2
Time: 67ms
Built at: 2020-09-26 9:00:13 ├F10: PM┤
     Asset       Size  Chunks             Chunk Names
 bundle.js   3.87 KiB       0  [emitted]  main
index.html  276 bytes          [emitted]  
Entrypoint main = bundle.js
[0] ./src/index.js 303 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js 2:6
Module parse failed: Unexpected token (2:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class Counter extends HTMLElement {
>     x = 0;
| 
|     clicked() {
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!./src/template.html 505 bytes {0} [built]

报错出在 index.js 第二行的第 6 个字符。

ERROR in ./src/index.js 2:6

也就是在下面这个地方：

class Counter extends HTMLElement {
    x = 0; // ← 这里
    // ...
}

查询得知，webpack 内部使用的 parser acorn 只支持 stage 4 阶段的提案。而我这里使用的 class (public) field declarations 的特性 目前还处于 stage 3 阶段，因此出错。这时就要借助 babel-loader 来转码了。

首先安装依赖：

$ npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties

然后配置 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // See: https://webpack.js.org/loaders/babel-loader/
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }
        ]
    },
    plugins: [
        // See: https://webpack.js.org/plugins/html-webpack-plugin/
        new HtmlWebpackPlugin({ template: './src/template.html' })
    ],
    mode: 'none'
};

重新编译，就不会有问题了。

$ npx webpack --watch

webpack is watching the files…

Hash: 651e138f726765848707
Version: webpack 4.44.2
Time: 802ms
Built at: 2020-09-26 10:31:09 ├F10: PM┤
     Asset       Size  Chunks             Chunk Names
 bundle.js   8.82 KiB       0  [emitted]  main
index.html  276 bytes          [emitted]  
Entrypoint main = bundle.js
[0] ./src/index.js 5.25 KiB {0} [built]
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!./src/template.html 505 bytes {0} [built]

最终得到的 bundle 文件如下（简要）：

var Counter = /*#__PURE__*/function (_HTMLElement) {
  _inherits(Counter, _HTMLElement);

  var _super = _createSuper(Counter);

  _createClass(Counter, [{
    key: "clicked",
    value: function clicked() {
      this.x++;
      window.requestAnimationFrame(this.render.bind(this));
    }
  }]);

  function Counter() {
    var _this;

    _classCallCheck(this, Counter);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "x", 0);

    _this.onclick = _this.clicked.bind(_assertThisInitialized(_this));
    _this.x = 0;
    return _this;
  }

  _createClass(Counter, [{
    key: "connectedCallback",
    value: function connectedCallback() {
      this.render();
    }
  }, {
    key: "render",
    value: function render() {
      this.textContent = this.x.toString();
    }
  }]);

  return Counter;
}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));

window.customElements.define('num-counter', Counter);

Tip:

上面的 @babel/plugin-proposal-class-properties plugin 是解决问题的关键。如果只是配置了 babel-loader 的 presets option，依然会报错。

$ npx webpack --watch

webpack is watching the files…

Hash: 2bb64eb81b2f5899f55f
Version: webpack 4.44.2
Time: 748ms
Built at: 2020-09-26 10:24:22 ├F10: PM┤
     Asset       Size  Chunks             Chunk Names
 bundle.js   7.78 KiB       0  [emitted]  main
index.html  276 bytes          [emitted]
Entrypoint main = bundle.js
[0] ./src/index.js 4.2 KiB {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: E:\projects\tc39-proposal-demos\proposal-class-fields\src\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (2:7):

  1 | class Counter extends HTMLElement {
> 2 |     x = 0;
    |       ^
  3 | 
  4 |     clicked() {
  5 |         this.x++

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.
    at Parser._raise (E:\projects\tc39-proposal-demos\node_modules\@babel\parser\lib\index.js:766:17)

（完）

本作品采用《CC 协议》，转载必须注明作者和本文链接