Question

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

问题是我在webpack编译期间遇到了这个错误：

'import'和'export'可能只出现在顶层

它发生在我的 router.js 中，它等于上面链接中的那个。用import编译替换System.import没有错误，浏览器加载块（在网络流量视图中可见），但页面仍为空白（我猜是没被执行！）。

这是我的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"
    }
  }
};

我该如何解决这个问题？

EDIT1：

错误的文件：

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};

EDIT2：我通过安装

解决了导入问题

巴别-插件 - 句法 - 动态导入

并将其添加到babel：

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

现在一切正常！

Answer 1

由于Node版本不同，新的Import API仍然有点令人困惑，特别是在使用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模块解析器中进行一些调整。

webpack'import'仅在顶层

1 个答案: