一般情況下,我們不用擔心所使用的第三方庫,在npm管理倉庫中找不到。
如果需要某一個庫,如:jquery,可以直接運行npm install jquery腳本命令來安裝這個項目所需要的依賴;
然后,在使用jquery的模塊文件中,通過import $ from 'jquery'或者var $ = require('jquery')來引入。
這是常用的在webpack構建的項目中引入第三方庫的方式。
注:為了更好的演示示例代碼,示例是在nodemon這篇文章的基礎上操作的。
但是,在不同的場景下,對webpack構建的項目有不同的需求:
項目的體積足夠小(cdn)
如果是webapck的處理方式,可參考webapck——實現構建輸出最小這篇文章。
使用非webapck的處理方式,如:CDN。
操作也很簡單,如果使用html-webpack-plugin直接在模板文件template/index.html中引入某個cdn(如:boot CDN)上的某個第三方庫(如:jquery),參考代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>third party</title></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></body></html>
然后,在module.js中使用jquery即可,參考代碼如下:
require('./module.css');module.exports = function() { $(document.body).append('<h1>hello webpack</h1>') }最后,運行npm run test,構建結束后,你會在瀏覽器中看到hello webpack字樣,背景是紅色的頁面效果。
全局環境下使用第三方庫(provide-plugin or imports-loader)
為了避免每次使用第三方庫,都需要用import或者require()引用它們,可以將它們定義為全局的變量。
而webpack的ProvidePlugin內置的插件,可以解決這個問題。詳情可參考ProvidePlugin這篇文章的介紹。
避免于cdn引用的jquery沖突,這里使用lodash。
首先,安裝lodash依賴,命令如下:
yarn add lodash --dev
然后,在webpack.config.js中,添加如下代碼:
new webpack.ProvidePlugin({ _: 'lodash'}),其次,在module.js中添加如下代碼:
...var arr = [1, 2, 3, 4, 5 ,6];// provide-plugin$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');...最后,運行npm run test腳本命令,構建完成后,你就可以瀏覽器的頁面中增加了1,2,3,4,5,6,~。
如果,你想指定lodash的某個工具函數可以全局使用,如:_.concat,
首先,像下面這樣修改
新聞熱點
疑難解答
圖片精選