Reactjs 使用 React 和 Webpack 编写可嵌入的 Javascript 插件

所以我找到了一个解决方案，如here所述

如果我更改我的webpack.config.js文件，将以下属性添加到output对象，即.

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

这将指定我将与webpackBundle 的文件作为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>

我的React应用程序呈现.

如果有人认为这是一种愚蠢的做法，我很乐意听到！

MORE INFORMATION ON WEBPACK CONFIG

请记住，我已经有一段时间没碰过这个代码了.考虑到它是Javascript，世界可能已经向前发展，一些实践可能已经过时.

这是我的React入口点文件(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 || "")
  );
}

这是我的网页配置(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，这是我的前端将摄取.