我在汇总中使用svelte。我需要支持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)上均同时中断。

最佳答案

您可以将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配置。)

关于javascript - 与Babel一起使用IE11,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59351708/

10-12 15:29