我想在我的Sapper项目中使用类属性和私有字段。显然,它们现在必须由babel进行预处理。
我试图将相应的babel插件添加到rollup.config.js中,只是为了实现一些目的。
babel汇总插件仅在旧版模式下使用。
服务器部分根本不使用babel。
我试图将babel汇总插件添加到这样的服务器插件的末尾,
babel({ extensions: ['.js', '.mjs', '.html', '.svelte'], runtimeHelpers: true, exclude: ['node_modules/@babel/**'], plugins: [ '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods', ], }),
但这似乎根本没有生效。
我也将其添加到客户端插件中(在旧版条目之前),但是它抱怨我需要添加@babel/plugin-syntax-dynamic-import
,因此babel似乎必须识别整个语法才能进行预处理,而且我真的不想编译动态导入适用于现代浏览器。
如何在sapper中启用esnext语法?
您需要使用
preprocess
rollup-plugin-svelte中的选项对的内容进行预处理:
plugins: [
svelte({
// ...
preprocess: {
script: ({ content }) => {
return transformWithBabel(content);
}
},
// ...
})
]
在理想的情况下,我们将有一个现成的预处理器插件来执行此操作;照原样,该transformWithBabel
功能现在作为练习留给读者。本质上,它将涉及import * as babel from '@babel/core'
并直接使用Babel API,我保证这会很有趣。
请注意,@babel/plugin-syntax-dynamic-import
它不会编译动态导入,而仅允许Babel对其进行解析。如果没有它,Babel将无法根据中的代码生成有效的AST 。