React & Webpack을 사용한 임베디드 가능한 Javascript 플러그인 쓰기

React & Webpack을 사용한 임베디드 가능한 Javascript 플러그인 쓰기

React 앱을 Webpack에 번들하여 CDN에 저장된 분산 복사본을 클라이언트와 관련된 일련의 구성으로 소싱, 호출 및 초기화할 수 있도록 하고 싶습니다.

이것저것 읽고 나서, Web 팩 엔트리 파일을 다음과 같이 셋업 합니다.

// ... React requires etc.

(() => {
  this.MyApp = (config) => {
    // some constructor code here
  }

  MyApp.prototype.init = () => {
    ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector);
  }
})();

제 클라이언트에서는 다음과 같은 일을 할 수 있다는 생각입니다.

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  });
</script>

그리고 나의MyApp#init이 함수는 클라이언트의 일부 컨테이너에 내 React 앱을 렌더링합니다.

제가 이걸 제대로 생각하고 있는 건가요?더 단순하고 효율적인 방법이 있을까요?

제 잘못은Uncaught TypeError: Cannot set property 'MyApp' of undefined,부터thisIIFE의 내부에서는undefined왜 이런 일이 일어나는지, 그리고 어떻게 고쳐야 하는지에 대한 조언도 꼭 듣고 싶습니다.

잘 부탁드립니다!

그래서 저는 여기에 설명된 바와 같이 이에 대한 해결책을 찾았습니다.

만약 내가 내 것을 바꾸면webpack.config.jsfile을 사용하여 다음 Atribut을 추가합니다.output오브젝트, 즉

var config = {
  // ...
  output: {
    // ...
    library: 'MyApp',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  }
}

웹 팩과 함께 번들할 파일을 UMD 모듈로 지정하기 때문에 해당 파일에 함수가 있어 내보내는 경우...

export const init = (config) => {
  ReactDOM.render(<MyReactApp config={config} />, someSelector);
}

그 후, 클라이언트에서는, 다음의 조작을 실시할 수 있습니다.

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  }); 
</script>

그리고 리액트 앱은 렌더링합니다.

이게 멍청한 방법이라고 생각하는 사람이 있다면, 듣고 싶어요!

웹 팩 구성에 대한 상세 정보

제가 이 코드를 오랫동안 만지지 않았다는 것을 명심하세요.Javascript를 보면 세상이 바뀌었을 가능성이 높으며 일부 관행은 시대에 뒤떨어진 것일 수 있다.

이것은 리액트 엔트리 포인트 파일입니다(src/index.js)

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import Root from './components/Root';
import configureStore from './lib/configureStore';

const store = configureStore();

export const init = (config) => {
  render(
    <Root store={store} config={config} />, 
    document.querySelector(config.selector || "")
  );
}

이것은 Web pack 설정입니다(webpack.config.js)

var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
        'webpack/hot/only-dev-server',
        './src/index.js' // Your appʼs entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'source-map',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        library: 'Foo',
        libraryTarget: 'umd',
        umdNamedDefine: true,
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: loaders
    },
    devServer: {
        contentBase: "./public",
            noInfo: true, //  --no-info option
            hot: true,
            inline: true
        },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

보다시피 웹 팩 설정은 다음 명령을 출력합니다.bundle.js내 앞부분에서 섭취하게 될 거야

당신 교실 주변에는 울타리가 있어요.

MyApp을 글로벌 창 개체에 내보내거나 연결해야 합니다.

이 경우 실제로는 MyApp.init()를 호출하는 것이 아니라 호출 창을 호출하는 것입니다.MyApp.init()이지만 글로벌 개체 창에 개체 MyApp이 연결되어 있지 않습니다.

// ... Simple attaching MyApp to the window (as a function)
window.MyApp = (config) => {
  ...
}

// ... Using class and export
class MyApp {
  constructor(config){...}
}
export default MyApp

// or simply attach to the window
window.MyApp = MyApp

export를 사용하여 클래스 및 export 모듈을 만들고 싶습니다.그런 다음 창에 첨부하기 위한 다른 파일을 만듭니다.그렇게 클래스를 창에 첨부하는 것은 베스트 프랙티스로 간주되지 않기 때문입니다.

// Import module and attach it to the window
import MyApp from '.my-app'
window.MyApp = MyApp

모듈을 UMD, AMD로 내보내기 위한 고급 옵션을 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/37239731/writing-embeddable-javascript-plugin-with-react-webpack