如何在 svelte/sapper 中使用 stage 3 语法？

Question

我想在我的 sapper 项目中使用 class 属性和私有字段。显然他们现在必须通过 babel 进行预处理。

我尝试在rollup.config.js中添加了相应的babel插件，只是实现了一些东西。

babel rollup 插件仅在旧版模式下使用。
服务器部分根本不使用babel。

我试过像这样将 babel rollup 插件添加到服务器插件的末尾，

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 语法？

Answer 1

您需要使用 rollup-plugin-svelte 中的 preprocess 选项预处理 <script> 的内容：

plugins: [
  svelte({
    // ...
    preprocess: {
      script: ({ content }) => {
        return transformWithBabel(content);
      }
    },
    // ...
  })
]

在理想情况下，我们会有一个现成的预处理器插件来执行此操作；实际上，transformWithBabel 函数暂时留作 reader 的练习。本质上它会涉及 import * as babel from '@babel/core' 并直接使用 Babel API，我保证这会很有趣。

注意 @babel/plugin-syntax-dynamic-import 不编译动态导入，它只允许 Babel 解析它。没有它，Babel 无法从 <script>.

中的代码生成有效的 AST

如何在 svelte/sapper 中使用 stage 3 语法？

How to use stage 3 syntax in svelte/sapper?

babeljs

ecmascript-next

svelte

sapper