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：...“导入”和“导出”可能仅出现在顶部级别

然后是空白页。在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这样的打包器。

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

1 个答案: