帶有 Snowpack 的 JavaScript 私有類方法

Question

我在前端代碼中使用私有 JavaScript 類方法，在開發工作流中使用Snowpack 。

目前（從 v2.15.0-pre.5 開始），Snowpack 似乎不能很好地與私有類方法一起使用，即，使用snowpack build時以下內容失敗：

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

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

復制的回購是here 。 克隆后，運行：

npm install
npm run build

我已經打開了一個關於 Snowpack 的問題，但顯然問題在於與 Rollup 的集成，並且修復不是優先事項。

據我了解，要解決它，我們需要：

• Snowpack 的自定義 Rollup 插件。
• 這樣的插件應該使用acornInjectPlugins來注入acorn-private-methods 。

我想知道在我深入學習 Rollup 生態系統之前，是否有人可以幫助舉個例子？

或者也許有另一種方法可以使它工作？

由於時間限制，我現在重新使用_methodName而不是#methodName ，但我計划在時間允許的情況下提供修復。

Answer 1

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 install --save-dev snowpack-plugin-acorn-injection acorn-stage3

• 紗線:

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

配置 Snowpack

使用snowpack-plugin-acorn-injection和相關的 Acorn 插件配置項目的Snowpack 配置：

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

Answer 2

我已經弄清楚了，使用 Rollup.js options掛鈎和acorn-stage3 acorn 插件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')()]
    }
  }