如何公开javascript模块'；使用Webpack 4的默认导出对象？

我有一个javascript es6模块，它导出一个对象，如下所示：

import HealthCarePlan from './health_care_plan/health-care-plan';
import CourseRequest from './course_request/course-request';

export default {
    CourseRequest: CourseRequest,
    HealthCarePlan: HealthCarePlan
};

如何告诉webpack将该对象导出到名为

appScripts

的全局变量？我希望能够从全局上下文中引用

appScripts.CourseRequest

和

appScripts.HealthCarePlan

这是我当前的网页包（分为common、dev.babel和dev.include模块）：

index.js webpack.common.babel.js webpack.dev.babel.js webpack.dev.include.js webpack.prod.babel.js package.json依赖项 我开始使用：

webpack-service--config webpack.dev.include.js

。在Chrome开发工具中，当我打开控制台，键入

app

并点击

enter

，我会得到

未定义的

但是，当我运行
webpack--config webpack.prod.babel.js
并在DevTools控制台中键入
app
时，我会返回
{one:'one'，two:'two}
对象

我的目标是在Django项目中使用这个包。我需要将数据从Django上下文传递到JS函数中，这就是为什么我需要将bundle作为库公开。
您可以使用它。首先，您需要为要成为全局文件的文件创建别名

resolve: {
  alias: {
    appScripts: '/path-to-app-scripts-file'
  }
}

并添加
ProvidePlugin

new webpack.ProvidePlugin({
  appScripts: ['appScripts', 'default']
})

现在，每当您使用全局
appScripts
变量时，它都会使用默认的导出自
appScripts
模块，该模块的别名为指定的文件。
为什么要全局访问它？更推荐的做法是将模块导入到所需的任何文件中，并以这种方式使用它们，否则就有点违背了在任何时候使用模块绑定器的目的all@kingdaro虽然我同意导入模块比在全球范围内导出模块更好，我正在使用Django模板，这些模板需要将数据从Django上下文传递到JavaScript函数。如果您有一个全局导出的替代方案，仍然允许我将数据从django上下文传递到js函数，我洗耳恭听
require('babel-register');
import path from 'path';
import webpack from 'webpack';
import merge from 'webpack-merge';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

import common from './webpack.common.babel';

export default merge(common, {
    devtool: 'inline-source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].bundle.css',
            chunkFilename: '[id].css'
        }),
        new webpack.NamedModulesPlugin()
    ],
    serve: {
        dev: {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        },
        host: '0.0.0.0',
        port: '8081',
        clipboard: false,
        hot: {
            port: '8500',
            host: {
                client: 'localhost',
                server: '0.0.0.0'
            }
        }
    }
});

require('babel-register');

const config = require('./webpack.dev.babel');

module.exports = config.default;

import path from 'path';
import merge from 'webpack-merge';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import BundleTracker from 'webpack-bundle-tracker';

import common from './webpack.common.babel';

export default merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'static/bundles'),
        publicPath: 'http://localhost:8081/static/bundles/'
    },
    module: {
        rules: [{
            test: /\.(css|scss|sass)$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ]
        }],
    },
    plugins: [
        new CleanWebpackPlugin(['./powerschool_apps/static/bundles/*']),
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].[hash].css',
            chunkFilename: '[id].css'
        }),
    ]
})

"dependencies": {
  "@reactivex/rxjs": "^6.0.0",
  "bootstrap": "^4.0.0",
  "bootstrap-markdown": "^2.10.0",
  "font-awesome": "^4.7.0",
  "font-awesome-animation": "^0.2.0",
  "gulp": "gulpjs/gulp.git#4.0",
  "hammerjs": "^2.0.8",
  "iframe-resizer": "^3.5.16",
  "jquery": "^3.3.1",
  "jquery-datetimepicker": "^2.5.16",
  "jquery.formset": "^1.3.0",
  "ladda": "^1.0.5",
  "materialize-autocomplete": "^1.0.7",
  "rx-dom": "^7.0.3",
  "select2": "^4.0.6-rc.1",
  "underscore": "^1.8.3"
},
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "browser-sync": "^2.23.7",
  "clean-webpack-plugin": "^0.1.19",
  "css-hot-loader": "^1.3.9",
  "css-loader": "^0.28.11",
  "file-loader": "^1.1.11",
  "merge-stream": "^1.0.1",
  "mini-css-extract-plugin": "^0.4.0",
  "normalize-package-data": "^2.4.0",
  "run-sequence": "^2.2.1",
  "sass-loader": "^7.0.1",
  "source-map-loader": "^0.2.3",
  "style-loader": "^0.21.0",
  "webpack": "^4.6.0",
  "webpack-bundle-tracker": "^0.3.0",
  "webpack-cli": "^2.0.15",
  "webpack-hot-client": "^2.2.2",
  "webpack-merge": "^4.1.2",
  "webpack-rxjs-externals": "^2.0.0",
  "webpack-stream": "^4.0.0"
},

resolve: {
  alias: {
    appScripts: '/path-to-app-scripts-file'
  }
}

new webpack.ProvidePlugin({
  appScripts: ['appScripts', 'default']
})