8 import ecmascript-6 reactjs webpack-dev-server webpack-2
我有一个通过 webpack 捆绑的Project1。我的要求是将此 bundle.js 放在 CDN 上，以便我可以在Project2 中使用在 Project 1 中导出的模块。
项目 1 文件->
你好.jsx：
import React, { Component } from "react";
export default class Hello extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
索引.js：
export {Hello} from "./src/Hello.jsx";
我正在创建一个名为bundle.js的包，出于演示目的，我没有将它添加到 CDN 中，而是简单地复制了这个bundle.js（与App.jsx位于同一文件夹中）并在Project2 中引用它。
项目 2 文件->
应用程序.jsx：
import React, { Component } from "react";
import Hello from "./bundle.js";
export default class App extends Component {
render() {
return (
<Hello/>
);
}
}
索引.js：
import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./src/App.jsx";
ReactDOM.render(
<App />,
document.getElementById("root2")
);
索引.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webpack 2 demo</title>
</head>
<body>
<div id="root2">
</div>
</body>
</html>
我正在尝试使用启用了 HMR 的 webpack-dev-server运行Project2，但它在 Google Chrome 控制台中出现错误：
警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。
未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。
"react": "^15.4.2" "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2", "babel-core": "^6.24.0"
我是否以错误的方式进行导入？还是导出有问题？请帮忙。
编辑：按照 Joe Clay 的建议为Project1添加 webpack.config.js ：
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'umd',
library: 'Hello'
},
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
React: 'react'
})
],
};
为了做到这一点，你需要更新你的 webpack 配置以输出一个可以导出的包。
你的配置需要有这些行
{
output: {
libraryTarget: 'umd', // make the bundle export
externals: {
'react': { // import react from an external module so you don't have multiple instances
'commonjs': 'react',
'amd': 'react'
},
'react-dom': { // some versions of react had links to react-dom so its good to include this
'commonjs': 'react-dom',
'amd': 'react-dom'
}
}
}
}
需要注意的是，如果您在项目中使用 create-react-app，您将需要弹出您的子项目来更改您的配置
尝试
import {Hello} from "./bundle.js";
您没有Hello默认导出。
export {Hello} from "./src/Hello.jsx";
| 归档时间： |
|
| 查看次数： |
9742 次 |
| 最近记录： |