如何使用 webpack 将非模块化 javascript 文件捆绑到文件中

Question

我想捆绑一个非模块化js的文件，它使用jquery，在$.fn上注册一个方法，所以这个js必须在捆绑后放在jquery后面。

这个js文件像

(function($){
     $.fn.splitPane = ...
}(JQuery)

complete code split-pane.js

我认为所有相关文件都将有助于解决这个问题。 https://gist.github.com/iamwwc/4e048d8669c332cecee2233f850c69d4

我的项目路径：

/root
    /dist/public/assets/js/main.js  #it's bundled result file.
    /src/main.ts
    /vendor/split-pane.js
package.json
tsconfig.json
webpack.config.js

我认为在结果 main.js 中，理想的顺序是 jquery => split-pane => main.ts。 我在 jquery 之后使用 raw-loader 加载拆分窗格，但不工作。

请帮助我.. 我使用 Google、stackoverflow、webpack docs 和许多方法来解决这个问题，但都不起作用。我累了。

最后，原谅我的英语不好。

Answer 1

在 split-pane.js 的顶部，添加 var jQuery = require('jquery')。然后在你想使用它的时候做require('./vendor/split-pane.js')。