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

您可以将Babel插件的配置用作in Sapper作为参考：

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代码都使用相同的规则进行了转译，或者根本没有进行转译...

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

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

与Babel一起使用IE11

1 个答案: