如何在Svelte / Sapper中使用第3阶段语法？

Question

我想在我的Sapper项目中使用类属性和私有字段。显然，它们现在必须由babel进行预处理。

我试图将相应的babel插件添加到rollup.config.js中，只是为了实现一些目的。

1. babel汇总插件仅在旧版模式下使用。
2. 服务器部分根本不使用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语法？

Answer 1

您需要<script>使用preprocessrollup-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 <script>。