使用 Webpack 捆绑老式的串联 JS

Question

我有一个项目，它具有用于浏览器的老式预模块样式 JS。 JS 由数百个这样构建的组件组成：

根：

(function() {
    "use strict"
    window.App = {};

    App.SomeNameSpace = {};

    App.SomeOtherNameSpace = {};
})();

示例组件：

(function() {
    "use strict";

    App.SomeNameSpace.ExampleComponent = function () { };

    App.SomeNameSpace.ExampleComponent.prototype.func = function () {
    // Do some random things here
    };
})();

示例组件2：

(function() {
    "use strict";
    App.SomeNameSpace.ExampleComponent2 = function () { };

    App.SomeNameSpace.ExampleComponent2.prototype.func = function () {
    // Do some other random things here
    };
})();

文件布局是这样的：

some-namespace/component.0.js
some-namespace/component.1.js
some-other-namespace/other-component.0.js
root-component.js

捆绑过程是将所有脚本连接到单个文件夹（命名空间）中，缩小结果并将其作为单个捆绑输出（例如 some-namespace.js）。然后网站会以正确的顺序输出脚本，因此 root.js 将首先运行（这样所有的命名空间都被定义），然后是带有实际“类”的包。

没有导入，没有 ES5/ES6 功能，除了一些填充的 API，它依赖于 jQuery 和其他一些外部库。

还需要注意的是，每个命名空间都有自己的捆绑包，并不是所有的命名空间都在每个页面中使用。每个应用页面都会选择它需要的组件，所有页面中只加载根脚本。

我怎样才能以最不痛苦的方式“webpack-ify”这个？由于没有导入，因此没有真正的入口点，所有内容都是使用命名空间全局定义的。

Answer 1

您只需更改根目录，即可将 App 变量暴露给窗口。

(function() {
    "use strict"
    App = App || {};

    App.SomeNameSpace = {};

    App.SomeOtherNameSpace = {};

    window.App = App;
    // ----^  exposing App variable to window
})();

然后创建额外的文件，我们称之为loader.js，这将需要所有文件按正确的顺序。