Методы частного класса JavaScript в Snowpack

Question

Я использую частные методы класса JavaScript во внешнем коде и Snowpack для рабочего процесса разработки.

В настоящее время (начиная с v2.15.0-pre.5) Snowpack, похоже, не очень хорошо работает с методами частного класса, т. Е. При сборке с использованием snowpack build:

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

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

Репо для воспроизведения здесь. После клонирования запустите:

       npm install
npm run build

Я открыл проблему со Snowpack, но, очевидно, проблема заключается в интеграции с Rollup, и исправление не является приоритетным.

Насколько я понимаю, для ее решения нам понадобятся:

• пользовательский Rollup плагин для снежного покрова.
• такой плагин должен использовать acornInjectPlugins вводить acorn-private-methods.

Интересно, может ли кто-нибудь помочь с примером этого, прежде чем я углублюсь в изучение экосистемы Rollup?

Или, может быть, есть другой способ заставить это работать?

Я вернулся к использованию _methodName вместо #methodName из-за нехватки времени, но я планирую внести исправление, когда позволит время.

Answer 1

Плагин Snowpack: snowpack-plugin-acorn-injection

Расширение прочь Noseratio работы "s, я создал НУЮ зависимость под названием snowpack-plugin-acorn-injection это добавит соответствующие плагины 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 add --dev snowpack-plugin-acorn-injection acorn-stage3
  

Настроить Snowpack

Настройте конфигурацию Snowpack проекта с помощью snowpack-plugin-acorn-injection и соответствующие плагины Acorn:

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

Answer 2

Я понял это, используя Rollup.js options крючок и acorn-stage3 плагин желудя, репо.

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')()]
    }
  }