如何解决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')()]
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。