javascript条件导入在Firefox中不起作用

Question

我正在使用webpack模板构建Vue.js应用程序。

由于我有一些适用于模拟api的测试，因此仅在测试时才需要导入这些api。 为此，我在main.js文件中添加了条件导入：

if (process.env.NODE_ENV === 'testing') {
    import('apiMocking')
    .then(() => {
       console.log('mocked api imported');
    });
}

这样，当我运行测试时，他们使用的是模拟的api，而当我运行应用程序时，则使用的是实际的api。 问题在于，使用此配置后，应用程序启动后，Firefox中将出现以下错误：

语法错误：...“导入”和“导出”可能仅出现在顶层

然后只是一个空白页。 在Chrome中一切正常...我该如何解决？

编辑：我已经在使用wepback + babel，我的webpack配置是从以下vue模板中获取的： https : //github.com/vuejs-templates/webpack然后我还添加了Babel：

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

然后在我的webpack.base.conf文件中：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

Answer 1

import()目前仅在JavaScript提案流程的第3阶段（与ES2015中的import和export不同）。 您不能随意依赖第3阶段的提案支持。 显然，最近的Chrome支持它，而最近的Firefox还不支持。

如果要在提案至少进入第4阶段之前使用它们，通常必须使用像Babel这样的翻译器和/或像Webpack或Browserify这样的打包器。