文章/答案/技术大牛

发布

社区首页 >问答首页 >webpack“进口”仅在高层

问webpack“进口”仅在高层
EN

Stack Overflow用户

提问于 2017-09-18 12:28:54

回答 1查看 3K关注 0票数 1

我正在尝试使用反应路由器异步路由在我的react项目中实现异步路由。

问题是，在webpack编译过程中，我遇到了这个错误：

“导入”和“出口”只能出现在顶层

它发生在我的router.js中，它等于上面链接中的那个。将import替换为System.import编译，没有错误，浏览器加载块(在System.import中可见，但页面仍然是空白的(我猜它没有被执行！)

这是我的webpack配置：

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-plugin-语法-动态导入

把它加到babel身上：

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

现在一切都正常了！

reactjs

webpack

react-router

javascript

回答 1

Stack Overflow用户

发布于 2017-09-18 14:07:58

新的Import仍然有点混乱，因为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模块解析器中做一些调整。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46279314

复制

相似问题

问webpack“进口”仅在高层
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack“进口”仅在高层EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack“进口”仅在高层
EN