javascript - webpack 'import' 仅在顶层

Question

我正在尝试使用 react-router-async-routing 在我的 react 项目中实现异步路由.

问题是我在 webpack 编译过程中得到了这个错误:

'import' and 'export' may only appear at the top level

它发生在我的 router.js 中，它与上面的链接相同。用 System.import 替换 import 编译没有错误，浏览器加载 block (在 network-traffic-view 中可见)，但是页面保持空白(我猜它没有被执行!)。

这是我的 webpack-config:

var { path, resolve } = require("path");
var webpack = require("webpack");

module.exports = {

  entry: {
    app: "./src/js/user/main.js",
    vendor: ["react", "react-dom"]
  },

  output: {
    path: __dirname + "/resources/user/js",
    publicPath: "/resources/user/js/",
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js"
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      filename: "vendor.bundle.js"
    })
  ],

  module: {
    loaders: [{
        test: /.(js|jsx)?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['env', 'react']
        }
      },
      {
        test: /\.(less)$/,
        loaders: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.(css)$/,
        loaders: ["style-loader", "css-loader"]
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: "url-loader"
      }
    ]
  },

  resolve: {
    alias: {
      "global": __dirname + "/src/js/user/module/global"
    }
  }
};

我该如何解决这个问题？

编辑1:

错误文件:

import AsyncSetup from "react-router-async-routing";

import routes from "./routes";

const {Route, Link, Preload} = AsyncSetup(routes, path => {
    import(`./routes/${path}.jsx`);
});

export {Link, Route, Preload};

编辑2:我通过安装解决了导入问题

babel-plugin-syntax-dynamic-import

并将其添加到 babel 中:

test : /.(js|jsx)?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
    presets: [['es2015'], 'react'],
    plugins: ["syntax-dynamic-import"]
}

现在一切正常!

Answer 1

新的 Import API 仍然有点困惑，因为不同的 Node 版本，特别是在使用 Babel 和 Webpack 等转译工具时。我强烈建议您在动态导入(文件路径不是常量)中使用 require() 而不是 import() 并让 import 用于持续依赖，这就是我在我的项目中所做的，我没有任何问题。

像这样:

import AsyncSetup from "react-router-async-routing";

import routes from "./routes";

const {Route, Link, Preload} = AsyncSetup(routes, path => {
  return require(`./routes/${path}.jsx`);
});

export {Link, Route, Preload};

您也可以使用绝对路径，这可能更安全，具体取决于您的环境和代码。

import path from 'path';
import AsyncSetup from "react-router-async-routing";

import routes from "./routes";

const {Route, Link, Preload} = AsyncSetup(routes, path => {
  return require(path.join(__dirname, `./routes/${path}.jsx`));
});

export {Link, Route, Preload};

如果这不能解决您的问题，也许您需要在 babel/webpack 模块解析器中进行一些调整。