JavaScript 使用 Snowpack 的私有 class 方法

Question

我使用 private JavaScript class methods in my front-end code and Snowpack 作为我的开发工作流程。

目前（从 v2.15.0-pre.5 开始），Snowpack 似乎不能很好地使用私有 class 方法，即，以下在使用 snowpack build 构建时失败：

export class TestClass {
  #test() {
    console.log("testing...");
  }

  test() {
    this.#test();
  }
}

要复制的回购是 here。克隆后，运行:

npm install
npm run build

我已经用 Snowpack 打开了一个 issue，但显然问题出在与 Rollup 的集成上，修复不是优先事项。

据我了解，要解决这个问题我们需要：

• a custom Rollup plugin 用于积雪。
• 这样的插件应该使用acornInjectPlugins to inject acorn-private-methods.

在我深入学习 Rollup 生态系统之前，我想知道是否有人可以帮助举个例子？

或者也许还有其他方法可以让它发挥作用？

由于时间限制，我现在重新使用 _methodName 而不是 #methodName，但我计划在时间允许的情况下提供修复。

Answer 1

我已经弄明白了，使用 Rollup.js options hook and acorn-stage3 acorn plugin, repo。

acorn-private-methods 也可以使用（如果只需要私有方法）。

• 创建自定义 Rollup.js 插件，我将其命名为 @noseratio/rollup-acorn-conf:

"use strict";

module.exports = function plugin(hostOpts = {}) {
  return { 
    name: 'rollup-acorn-conf',

    options: rollupOpts => { 
      console.log("Enabling 'acorn-stage3'...");
      rollupOpts.acorn = rollupOpts.acorn ?? {};
      rollupOpts.acorn.ecmaVersion = 2020;
      rollupOpts.acornInjectPlugins = rollupOpts.acornInjectPlugins ?? [];
      rollupOpts.acornInjectPlugins.push(require('acorn-stage3'));
      return rollupOpts;
    }
  };
};

是package.json:

{
  "name": "@noseratio/rollup-acorn-conf",
  "version": "0.1.1",
  "description": "Enable ES2020 features (Stage 3) for Rollup.js",
  "homepage": "https://github.com/noseratio/snowpack-discussions-1209",
  "main": "index.js",
  "scripts": {},
  "devDependencies": {
    "acorn-stage3": "^4.0.0"
  }
}

• 在snowpack.config.js中：

  installOptions: {
    rollup: { 
      plugins: [require('@noseratio/rollup-acorn-conf')()]
    }
  }

Answer 2

Snowpack 插件：snowpack-plugin-acorn-injection

扩展 @noseratio 的工作，我创建了一个名为 snowpack-plugin-acorn-injection 的 NPM 依赖项，它将相关的 Acorn 插件注入 Rollup 的内部配置。

插件可用：

• 在 NPM 上：https://www.npmjs.com/package/snowpack-plugin-acorn-injection
• 在 GitHub 上：https://github.com/concision/snowpack-plugin-acorn-injection

---

例子

依赖安装

安装插件和所需的相关 Acorn 插件（例如，acorn-stage3）作为开发依赖项。

步骤：

• npm:

  npm install --save-dev snowpack-plugin-acorn-injection acorn-stage3
  

• Yarn:

  yarn add --dev snowpack-plugin-acorn-injection acorn-stage3
  

配置 Snowpack

使用 snowpack-plugin-acorn-injection 和相关的 Acorn 插件配置项目的 Snowpack configuration：

{
  ...
  "plugins": [
    [
      "snowpack-plugin-acorn-injection",
      {
        "plugins": [
          "acorn-stage3"
        ]
      }
    ]
  ],
  ...
}