[英]JavaScript private class methods with Snowpack
I useprivate JavaScript class methods in my front-end code and Snowpack for my development workflow.我在前端代码中使用私有 JavaScript 类方法,在开发工作流中使用Snowpack 。
Currently (as of v2.15.0-pre.5), Snowpack doesn't seem to play well with private class methods, ie, the following fails to when building with snowpack build
:目前(从 v2.15.0-pre.5 开始),Snowpack 似乎不能很好地与私有类方法一起使用,即,使用
snowpack build
时以下内容失败:
export class TestClass {
#test() {
console.log("testing...");
}
test() {
this.#test();
}
}
A repo to reproduce is here .复制的回购是here 。 After cloning, run:
克隆后,运行:
npm install
npm run build
I've opened an issue with Snowpack, but apparently the problem lays in the integration with Rollup and the fix isn't a priority.我已经打开了一个关于 Snowpack 的问题,但显然问题在于与 Rollup 的集成,并且修复不是优先事项。
As far as I understand, to solve it we need:据我了解,要解决它,我们需要:
acornInjectPlugins
to inject acorn-private-methods
.acornInjectPlugins
来注入acorn-private-methods
。 I wonder if anyone could help with an example of this, before I dive deep into learning Rollup ecosystem?我想知道在我深入学习 Rollup 生态系统之前,是否有人可以帮助举个例子?
Or maybe there's another way to make it work?或者也许有另一种方法可以使它工作?
I'm now back to using _methodName
instead of #methodName
due to time constraints, but I plan to contribute a fix when time allows.由于时间限制,我现在重新使用
_methodName
而不是#methodName
,但我计划在时间允许的情况下提供修复。
snowpack-plugin-acorn-injection
snowpack-plugin-acorn-injection
Expanding off of @noseratio 's work, I have created a NPM dependency called snowpack-plugin-acorn-injection
that will inject the relevant Acorn plugins into Rollup's internal configuration.扩展@noseratio的工作,我创建了一个名为
snowpack-plugin-acorn-injection
的 NPM 依赖项,它将相关的 Acorn 插件注入到 Rollup 的内部配置中。
The plugin is available:该插件可用:
Install the plugin and the relevant Acorn plugin(s) that are desired (for example, acorn-stage3
) as development dependencies.安装插件和所需的相关 Acorn 插件(例如
acorn-stage3
)作为开发依赖项。
Steps:脚步:
npm install --save-dev snowpack-plugin-acorn-injection acorn-stage3
yarn add --dev snowpack-plugin-acorn-injection acorn-stage3
Configure the project's Snowpack configuration with snowpack-plugin-acorn-injection
and the relevant Acorn plugins:使用
snowpack-plugin-acorn-injection
和相关的 Acorn 插件配置项目的Snowpack 配置:
{
...
"plugins": [
[
"snowpack-plugin-acorn-injection",
{
"plugins": [
"acorn-stage3"
]
}
]
],
...
}
I've figured it out, using Rollup.js options
hook and acorn-stage3
acorn plugin, repo .我已经弄清楚了,使用 Rollup.js
options
挂钩和acorn-stage3
acorn 插件repo 。
acorn-private-methods
can be used as well (if only private methods wanted).也可以使用
acorn-private-methods
(如果只需要私有方法)。
@noseratio/rollup-acorn-conf
:@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;
}
};
};
Its package.json
:它的
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
:snowpack.config.js
: installOptions: {
rollup: {
plugins: [require('@noseratio/rollup-acorn-conf')()]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.