javascript - 有没有办法在另一个项目中使用 web-pack 捆绑文件中的对象和类？

Question

我正在尝试使用从一个项目到另一个节点项目的“bundle.js”。

一个client包 ( )在捆绑所有客户端组件后https://github.com/galaxyproject/galaxy/tree/dev/client生成一个目录。dist在内部，它会生成几个捆绑文件，dist例如等。analysis.bundle.jsadmin.bundle.js

我想analysis.bundle.js在另一个节点包中使用。我只是将 prebuild 客户端/lib/dist/与我的项目特定的 /lib/index.js' 一起用作入口点，并在'web-pack' 输出中捆绑特定于项目的index.js文件和复制/lib/dist/文件，而不使用CopyWebpackPlugin. 我的 web-pack 文件如下所示。

var path = require('path');
var version = require('./package.json').version;
const CopyWebpackPlugin = require("copy-webpack-plugin");

// Custom webpack rules are generally the same for all webpack bundles, hence
// stored in a separate local variable.
var rules = [
    { test: /\.css$/, use: ['style-loader', 'css-loader']},
    { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i, use: ['file-loader','url-loader','svg-url-loader'] }
    
]

const resolve = {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".webpack.js", ".web.js",  ".js", ".css"],
    fallback: { 
        "path": require.resolve("path-browserify"),
        "os": require.resolve("os-browserify/browser"),
        "crypto": require.resolve("crypto-browserify"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "vm": require.resolve("vm-browserify") ,
        "stream": require.resolve("stream-browserify"),
        "constants": require.resolve("constants-browserify"), 
        fs: false,
        child_process: false,
        worker_threads: false

  }
  }; 

module.exports = (env, argv) => {
    var devtool = argv.mode === 'development' ? 'source-map' : false;
    return [
        {// Notebook extension
        //
        // This bundle only contains the part of the JavaScript that is run on
        // load of the notebook. This section generally only performs
        // some configuration for requirejs, and provides the legacy
        // "load_ipython_extension" function which is required for any notebook
        // extension.
        //
            entry: './lib/extension.js',
            output: {
                filename: 'extension.js',
                path: path.resolve(__dirname, '..', 'tutorial', 'nbextension'),
                libraryTarget: 'amd',
                publicPath: '' // publicPath is set in extension.js
            },
            devtool,
            plugins: [
            new CopyWebpackPlugin({
                patterns: [

                    { from: "./lib/", to: path.resolve(__dirname, '..', 'tutorial', 'nbextension')},
                ]
        })
            ],
            resolve,
        },
        {// Bundle for the notebook containing the custom widget views and models
        //
        // This bundle contains the implementation for the custom widget views and
        // custom widget.
        // It must be an amd module
        //
            entry: './lib/index.js',
            output: {
                filename: 'index.js',
                path: path.resolve(__dirname, '..', 'tutorial', 'nbextension'),
                libraryTarget: 'amd',
                publicPath: '',
            },
            devtool,
            plugins: [
                new CopyWebpackPlugin({
                    patterns: [
    
                        { from: "./lib/", to: path.resolve(__dirname, '..', 'tutorial', 'nbextension')},
                    ]
            })
                ],
            module: {
                rules: rules
            },
            externals: ['@jupyter-widgets/base','fsevents'],
            resolve,
        },
        {// Embeddable galaxylab bundle
        //
        // This bundle is generally almost identical to the notebook bundle
        // containing the custom widget views and models.
        //
        // The only difference is in the configuration of the webpack public path
        // for the static assets.
        //
        // It will be automatically distributed by unpkg to work with the static
        // widget embedder.
        //
        // The target bundle is always `dist/index.js`, which is the path required
        // by the custom widget embedder.
        //
            entry: './lib/embed.js',
            output: {
                filename: 'index.js',
                path: path.resolve(__dirname, 'dist'),
                libraryTarget: 'amd',
                publicPath: ''
            },
            devtool,
            module: {
                rules: rules
            },
            plugins: [
                new CopyWebpackPlugin({
                    patterns: [
    
                        { from: "./lib/", to: path.resolve(__dirname, 'dist')},
                    ]
            })
                ],
            externals: ['@jupyter-widgets/base','fsevents'],
            resolve,
        }
    ];
}

分析包有一些公开的变量，bundleEntires因为应该可以访问，如此处所述

https://github.com/galaxyproject/galaxy/blob/release_21.05/client/src/bundleEntries.js

我想在我的其他 .js 文件中使用这些 bundleEntries 作为来自捆绑文件的正常导入。

当我尝试bundleEntries从“analysis.bundle.js”访问组件（例如类和对象）时，如下所述。我无法做到。

import * as bundleEntries from './analysis.bundled.js

来自客户端的捆绑文件可以使用 conda env 快速复制。

conda create -n TestEnv nodejs=14.15.1 yarn -y

cd client 

npm run build

请建议，如何解决这个问题..

谢谢

标签： javascriptnode.jswebpackwebpack-dev-serverwebpacker