I am trying to use a "bundle.js" from one project to another node project.
A client
package (https://github.com/galaxyproject/galaxy/tree/dev/client
) generates a dist
directory after bundling all the client-side component. inside dist
, it generates several bundle files such as analysis.bundle.js
, admin.bundle.js
etc.
I want to use analysis.bundle.js
in another node package. I just use prebuild client /lib/dist/
as an entry point along with my project-specific /lib/index.js' and bundling project-specific index.js
file and copying /lib/dist/
file in 'web-pack' output without bundling them by using CopyWebpackPlugin
. My web-pack file is as given below.
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,
}
];
}
analysis bundle has some exposed variable as bundleEntires
that should be accessible as described here
https://github.com/galaxyproject/galaxy/blob/release_21.05/client/src/bundleEntries.js
I want to use these bundleEntries in my other .js file as normal imports from the bundled files.
When I tried to access the bundleEntries
component such as classes and objects from the "analysis.bundle.js', as described below. I am not able to do it.
import * as bundleEntries from './analysis.bundled.js
bundled files from the client can be quickly reproduced with the conda env.
conda create -n TestEnv nodejs=14.15.1 yarn -y
cd client
npm run build
Please suggest, How to solve this problem..
thanks