webpack에서 만든 번들을 가져 오는 방법은 무엇입니까?

나는 프로젝트 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와 웹팩-dev에 서버를 사용할 사용 Project2에를 실행하려고하고 있지만, 구글 크롬 콘솔에서 오류 제공 : 패키지의

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' 
    }) 
    ], 
};

출처

2017-03-22 Tushar Gupta

Project1을위한'webpack.config.js'를 포함시킬 수 있습니까? –

당신이해야 할 일은'import {Hello} from './bundle''입니다. –

당신은 기본적으로 Hello 수출되지 않습니다

import {Hello} from "./bundle.js";

을보십시오.

export {Hello} from "./src/Hello.jsx";

출처

2017-03-22 10:48:01

이 작업을 수행하려면 webpack 구성을 업데이트하여 내보낼 수있는 번들을 출력해야합니다.

귀하의 설정 당신이 당신의 프로젝트에 대해 생성-반응-응용 프로그램을 사용하는 경우 당신은 당신의 설정을 변경하려면 하위 프로젝트를 배출해야합니다 것이 중요합니다

{ 
    output: { 
     libraryTarget: 'umd', // make the bundle export 
     externals: { 
      'react': { // import react from an external module so you done have multiple 
       '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' 
      } 
     } 
    } 
}

이 라인을 가질 필요가

출처

2017-03-22 10:52:17 megamit

webpack에서 만든 번들을 가져 오는 방법은 무엇입니까?

답변

관련 문제