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 中就会出现以下错误：

SyntaxError: ... 'import' 和 'export' 可能只出现在顶部 等级

然后只是一个空白页。 在 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 proposals process 的第 3 阶段（与 ES2015 中的 import 和 export 不同）。您不能完全依赖 Stage 3 提案支持。显然，最近的 Chrome 支持它，而最近的 Firefox 还不支持。

如果您想在提案达到第 4 阶段之前使用它们（至少），您通常必须使用像 Babel 这样的转译器和/或像 Webpack 或 Browserify 这样的捆绑器。