用于 IE11 的带有 Babel 的 Svelte

Question

我正在将 svelte 与 Rollup 一起使用。 我需要支持 IE11

我当前在 rollup.config.js 中的 babel 配置是：

babel({
            extensions: [ '.js', '.mjs', '.html', '.svelte' ],
            exclude: 'node_modules/**',
            presets: [
                [
                '@babel/env',
                {
                    modules: 'false',
                    targets: {
                    browsers: '> 1%, IE 11, not op_mini all, not dead',
                    node: 8
                    },
                    useBuiltIns: 'usage'
                }
                ]
            ]
        }),

请帮我配置，现在我的应用程序在 IE 和其他（Chrome、Mozilla）上都崩溃了。

Answer 1

您可以参考Sapper 中使用的 Babel 插件的配置：

babel({
  extensions: ['.js', '.mjs', '.html', '.svelte'],
  runtimeHelpers: true,
  exclude: ['node_modules/@babel/**'], // <= /!\ NOT 'node_mobules/**'
  presets: [
    ['@babel/preset-env', {
      // adapter to ensure IE 11 support
      targets: '> 0.25%, not dead, IE 11'
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-runtime', {
      useESModules: true
    }]
  ]
}),

需要注意的重要一点是，您不能将整个node_modules排除在 Babel 处理之外。 原因是 Svelte 的代码本身（即在node_modules/svelte ）需要转译以支持 IE 11。 同样，如果您使用第三方 Svelte 组件，它们可能会位于node_modules下，但需要转换。

另一个需要了解的棘手问题是转译的代码不能与非转译的代码兼容。 特别是，ES6+ 类（用于 Svelte 组件）与其 ES5 转译对应物不兼容（“不能从非类扩展，yada yada...”）。 因此，您必须确保所有 Svelte 代码都使用相同的规则进行转换，或者根本不进行转换...

这是另一个示例，它在原始 Svelte（即非 Sapper）项目中使用（几乎）相同的配置。

这两个链接都指向模板项目，因此您可以轻松地克隆和运行它们以亲自尝试。 （如果你想使用第二个例子，请注意我的链接没有指向 master 分支，所以你必须签出正确的分支来尝试 babel 配置。）