用React＆Webpack编写可嵌入的Javascript插件

用React＆Webpack编写可嵌入的Javascript插件

让我有种找到了一个解决方案，如所描述这里

如果我更改

webpack.config.js

文件以将以下属性添加到

output

对象，即

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

这指定了我与webpack捆绑在一起的文件作为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应用程序渲染。

如果有人认为这是愚蠢的做法，我很想听听！

有关WEBPACK CONFIG的更多信息

请记住，我已经有一段时间没有接触过此代码了。鉴于它是Java语言，世界可能已经发展了，某些实践可能已经过时了。

这是我的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配置（

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

如您所见，我的Webpack配置输出my

bundle.js

，这是我的前端将摄取的内容。