Snowpack的JavaScript私有类方法 依赖安装配置Snowpack

问题描述

我在前端代码中使用private JavaScript class methods，在开发工作流程中使用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打开了issue，但是显然问题出在与Rollup的集成上，而修复也不是重点。

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

• 一个custom Rollup plugin的Snowpack。
• 此类插件应使用acornInjectPlugins注入acorn-private-methods。

在我深入学习Rollup生态系统之前，我想知道是否有人可以提供一个示例？

或者也许还有另一种方法可以使它工作？

由于时间限制，我现在恢复使用_methodName而不是#methodName，但是我计划在时间允许的情况下提供解决方案。

解决方法

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"
        ]
      }
    ]
  ],...
}

,

我已经使用Rollup.js options钩子和acorn-stage3橡子插件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')()]
    }
  }