webpack将对象公开为全局

Question

我有一个coffeeScript文件＆app.coffee＆＃39;

root = exports ? this

class DefipsyApplication extends Marionette.Application
  user_is_superuser: () ->
    app_config.is_superuser

app = new DefipsyApplication

app.addRegions {
  modalRegion: '#modal-region'
}

unless root.App
  root.App = app

我想在浏览器中公开App功能

所以这是我的webpack配置

module.exports = {
    entry: {
        app: './coffee/app.coffee',
    },
    output: {
        path: './build/',
        filename: '[name].bundle.js',
        libraryTarget: "var",
        library: ["MyProject", "[name]"],
    },
    module: {
        loaders: [
            { test: './coffee/app.coffee', loaders: ['expose?App', 'coffee'] },
        ]
    },
};

我在浏览器中测试时发现webpack将我的对象暴露给了浏览器，但是这个对象被其他对象所吸引

所以要调用我的方法我应该做

App.App

我希望在没有此全局变量的情况下公开我的函数 我需要使用

直接访问

App

这是一个显示对象结构

的scree

Answer 1

通常，要在JavaScript中公开全局变量，方法和模块，您可以使用多种方法。

1. 您可以通过

   手动将其添加到浏览器的窗口对象中

   window.app = app
   

   或通过

   构建一个新对象

   window.app = { func1, func2,...}
   

2. expose-loader是Webpack的插件，它将模块添加到全局对象。如果您使用yarn进行依赖关系管理，可以通过

   安装expose-loader包

   yarn add expose-loader --dev
   

   或者，您可以通过

   使用npm安装程序（节点包管理器）

   npm i expose-loader --save
   

   您可以使用

   公开任何功能

   require("expose-loader?package!functionName");
   

如果您需要更多信息，请查看at my post here