Question

我知道webpack编译的bundle不会写入全局命名空间。

但是，将webpack编译的东西（例如：splitChunks创建的vendor.js）导入到非webpack项目中的最佳做法是什么？我有一些旧的后端代码，它通过line-创建一个html文件。我想要包含并重新使用捆绑的一些新UI组件。此外，在webpack配置中，我有一些通过ProvidePlugin插件声明的遗留全局函数（例如：“GlobalFunction”）。

<html>
  <body>
    <div id="everything" class="everything">
      <script src="vendor.bundle.js"></script>
      <script src="commons.bundle.js"></script>
      <script src="app.bundle.js"></script>
      <script>
        GlobalFunction();

        ReactDOM.render(
          React.createElement(Component1, {
            prop1: '1',
            prop2: '2',
          }, null),
          document.getElementById('mainbody')
        );

      </script>
    </div>
    <div id='mainbody'>
      <!--- rendered by react -->
    </div>
  </body>
</html>

所以问题是， GlobalFunction 和 ReactDOM 未知，因此抛出“未定义”错误。当然，当我从CDN中取代ReactDOM时

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

ReactDOM在上下文中是正确的，但是Component1（在app.bundle.js中定义）则不知道。

以下仅供参考：

app.js （正确曝光）

export class Component1 extends React.Component {
...
}

webpack.conf 这是捆绑包的编译方式（不确定libraryTarget选项）。 Webpack不用于此项目。

//...
      optimization: {
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /node_modules/,
              chunks: "all",
              name: "vendor",
              priority: 10,
              enforce: true
            },
            commons: {
              chunks: "initial",
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0
            }
          },
        },
      },
//...
      output: {
          path: path.resolve(__dirname, '..', '/dist'),
          filename: '[name].bundle.js',
          libraryTarget: 'commonjs2',
      },
//...
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jquery: "jquery",
          GlobalFunction: ['../global.js', 'doGlobalFunction'],
        })
      ]

提前谢谢你！

的更新

我尝试了以下两个但仍然没有成功

webpack.conf （介绍库“testLib”，希望我能够从webpack上下文外部访问它，并将全局函数写入窗口。

//...
  output: {
      path: path.resolve(__dirname, '..', 'ui/ext/static/dist'),
      filename: '[name].bundle.js',
      libraryTarget: 'var',
      library:'testLib'
  },
//...
  plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jquery: "jquery",
        GlobalFunction: ['../global.js', 'doGlobalFunction'],
        "window.GlobalFunction" : ['../global.js', 'doGlobalFunction']
      })
  ]

遗憾的是，我无法访问GlobalFunction，也无法访问testLib

Answer 1

好的，我找到了让方法最终运转的方法。它不好用，因为它会污染窗口对象，但它适合我的需要。无论如何，这只是一个停止间隙解决方案，直到替换或移植旧的遗留代码。

我在webpack.conf中创建了一个新的入口点，

例如：exposedStuff.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Component1} from 'component1.jsx'

// expose what is imported via 'import'
window["React"] = React;
window["ReactDOM"] = ReactDOM;
window["Component1"] = Component1;
// expose what is globally defined via ProvidePlugin
window["GlobalFunction"] = GlobalFunction;

也将新文件包含在.html部分

中

...
<script src="exposedStuff.bundle.js"></script>
...

如何在不使用weback的情况下导入Web包编译功能？

的更新

1 个答案: