时间戳

首页 > 解决方案 > 如何在不使用 weback 的情况下导入 webpack 编译函数？

javascript - 如何在不使用 weback 的情况下导入 webpack 编译函数？

问题描述

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

但是，将 webpack 编译的东西（例如：由 splitChunks 创建的 vendor.js）导入非 webpack 项目的最佳实践是什么？我有一些旧的后端代码正在逐行创建一个 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 上下文之外访问它并将全局函数也写入 window.conf ）。

//...
  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

标签： javascriptreactjswebpack

解决方案

好的，我终于找到了一种让事情正常进行的方法。它不好，因为它污染了窗口对象，但它适合我的需要。无论如何，这只是一个权宜之计，直到旧的遗留代码被替换或移植。

我在 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>
...

推荐阅读