为 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

可以参考in 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 转译版本不兼容（"can't extend from non class, yada yada..."）。因此，您必须确保所有 Svelte 代码都使用相同的规则进行转译，或者根本不进行转译...

这里的 another example 在原始 Svelte（即非 Sapper）项目中使用（几乎）相同的配置。

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

为 IE11 使用 Babel 的 Svelte

Svelte with Babel for IE11

javascript

internet-explorer

babeljs

rollup

svelte