时间戳

首页 > 解决方案 > 如何在 svelte/sapper 中使用第 3 阶段语法？

babeljs - 如何在 svelte/sapper 中使用第 3 阶段语法？

问题描述

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

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

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

标签： babeljsecmascript-nextsveltesapper

解决方案

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

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>。

推荐阅读