webpack載入jQuery plugin或者其他legacy第三方庫

你的項目有時候會要載入各種各樣的第三方庫，一些老的庫不支持AMD或者CommonJS等一些先進的格式，比如一些jQuery的插件，它們都依賴jQuery，如果直接引用就會報錯 jQuery is not undefined這類的錯誤，有幾種方法解決

先創建一個jQuery plugin: plugin.js

(function ($) { const shade = "#556b2f"; $.fn.greenify = function() { this.css( "color", shade ); return this; };}(jQuery));

第一種方法 使用webpack.ProvidePlugin

webpack提供一個插件 把一個全局變數插入到所有的代碼中，在config.js裡面配置

... plugins: [ new HtmlwebpackPlugin({ title: Hello World app }), //provide $, jQuery and window.jQuery to every script new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] ...

在js中引用

...//這個也不需要了 因為$, jQuery, window.jQuery都可以直接使用了//import $ from jquery;import ./plugin.js;...myPromise.then((number) => { $(body).append(<p>promise result is + number + now is + moment().format() + </p>); //call our jquery plugin! $(p).greenify();});...

發現我們插入的p裡面的顏色已經變成了綠色！

第二種方法 使用imports-loader

先安裝這個loader

npm install imports-loader --save-dev

然後在入口js中

//注意這種寫法 我們把jQuery這個變數直接插入到plugin.js裡面了//相當於在這個文件的開始添加了 var jQuery = require(jquery);import imports?jQuery=jquery!./plugin.js;//後面的代碼一樣myPromise.then((number) => { $(body).append(<p>promise result is + number + now is + moment().format() + </p>); //call our jquery plugin! $(p).greenify();});

推薦閱讀：