私はプロジェクト1をwebpackでバンドルしています。私の要件は、このbundle.jsがCDNに置かれ、プロジェクト1でエクスポートされたモジュールをProject2の中で使用できるようにすることです。webpackで作成したバンドルをインポートするには？
プロジェクト1つのファイル - >
Hello.jsx：
import React, { Component } from "react";
export default class Hello extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
index.js：
export {Hello} from "./src/Hello.jsx";
私はBUを作成していますbundle.jsとデモの目的で、CDNで追加するのではなく、bundle.js（App.jsxと同じフォルダ）をコピーし、Project2で参照しています。
プロジェクト2つのファイル - >
App.jsx：
import React, { Component } from "react";
import Hello from "./bundle.js";
export default class App extends Component {
render() {
return (
<Hello/>
);
}
}
index.js：
import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./src/App.jsx";
ReactDOM.render(
<App />,
document.getElementById("root2")
);
のindex.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のサーバーを使用してのProject2を実行しようとしていますが、それはGoogle Chromeのコンソールでエラーが発生します：パッケージの
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
- 現在のバージョン：
"react": "^15.4.2" "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2", "babel-core": "^6.24.0"
間違った方法でインポートしていますか？または、エクスポートに何か問題がありますか？助けてください。
編集：ジョー・クレイsuggestedとして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'
})
],
};
Project1用の 'webpack.config.js'を含めてください。 –
あなたがする必要があるのは 'import {Hello} from '/ bundle''です –