Reactjs Webpack 2迁移中断ES6模块导入_Reactjs_Webpack_Babeljs

Reactjs Webpack 2迁移中断ES6模块导入

reactjs webpack

Reactjs Webpack 2迁移中断ES6模块导入,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,所以我最近在React应用程序上升级到了Webpack2。除了版本号外，我什么都没做就直接运行了！太好了然而，现在我正试图让它为我捆绑我的ES6模块（导入、导出等），而babel和webpack似乎并没有很好地结合在一起为了实现这一点，我所做的唯一更改是从以下内容更改我的.babelrc： { "presets": ["es2015", "stage-1", "react"], "plugins": ["transform-object-rest-spread"], } 为此： {

所以我最近在React应用程序上升级到了Webpack2。除了版本号外，我什么都没做就直接运行了！太好了

然而，现在我正试图让它为我捆绑我的ES6模块（导入、导出等），而babel和webpack似乎并没有很好地结合在一起

为了实现这一点，我所做的唯一更改是从以下内容更改我的

.babelrc

：

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

为此：

{
  "presets": [["es2015", {"modules": false}], "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

Webpack仍然将其捆绑在一起而不会抛出错误，但当我打开应用程序时，我会收到可怕的

“警告：React.createElement:类型不应为null、未定义、布尔或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。”

堆栈跟踪将我带回应用程序的第一行（

ReactDOM.render（…

）

从我所看到的情况来看，当您尝试使用

import{component}From./component.js'

而不是

import component From./component.js'

导入另一个组件的默认导出时，通常会出现此错误。不过，我不明白为什么会出现这种情况，因为我知道我的代码可以与babel进行传输

任何提示？

看起来像是

[“es2015”，{“modules”：false}]

不是必需的，而是导致错误的原因

通过让我的babelrc保持原样，并将以下插件添加到我的网页包配置中，实现了所需的行为：

new webpack.optimize.commonChunkPlugin（{…}）

和

new HtmlWebpackPlugin（{…}）

还根据进行了一些其他配置更改，这也有助于您单独打包供应商模块，并向您展示如何根据

react路由器

路由将代码拆分为块