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

Question

我有一个导出对象的 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。

这是我当前的 webpack(分为 common、dev.babel 和 dev.include 模块):

索引.js

export default {
    one: 'one',
    two: 'two'
}

webpack.common.babel.js

import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import webpackRxjsExternals from 'webpack-rxjs-externals';

const appsPath = 'powerschool_apps';
const staticPath = `${appsPath}/static`;

const config = {
    target: 'web',
    node: {
        fs: 'empty'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'static/bundles'),
        publicPath: 'http://localhost:8081/',
        library: 'app',
        libraryTarget: 'var'
    },
    entry: {
        app: [
            './powerschool_apps/static/js/index.js'
        ],
        vendor: [
            'jquery',
            `./${staticPath}/js/vendor-include.js`,
            `./${staticPath}/lib/materialize/js/bin/materialize.js`,
            'iframe-resizer',
            'underscore',
            `./${staticPath}/lib/materialize/sass/materialize.scss`,
        ]
    },
    performance: {
        hints: false
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor_app',
                    chunks: 'all',
                    minChunks: 2
                }
            }
        }
    },
    externals: [
        webpackRxjsExternals()
    ],
    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2)/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                }
            },
            {
                test: /\.(png|svg|gif)$/,
                loader:
                    'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        // new HardSourceWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
    ],
    resolve: {
        modules: [
            '/node_modules'
        ]
    }
};

export default config;

webpack.dev.babel.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'
            }
        }
    }
});

webpack.dev.include.js

require('babel-register');

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

module.exports = config.default;

webpack.prod.babel.js

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'
        }),
    ]
})

package.json 依赖

"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"
},

我开始使用 webpack-serve:webpack-serve --config webpack.dev.include.js。在 Chrome DevTools 中，当我打开控制台并输入 app 并点击 enter 时，我得到了 undefined。

但是，当我运行 webpack --config webpack.prod.babel.js 并在 DevTools 控制台中输入 app 时，我得到了 {一:“一”，二:“二”对象。

我的目标是在 Django 项目中使用这个包。我需要将数据从 Django 上下文传递到 JS 函数中，这就是为什么我需要将包公开为一个库。

Answer 1

您可以使用 ProvidePlugin为了这样做。首先你需要为你想要全局的文件创建别名

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

并添加ProvidePlugin

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

现在，每当您使用全局 appScripts 变量时，它都会使用 appScripts 模块的默认导出，该模块是指定文件的别名。