鍍金池/ 問答/HTML/ webpack打包項目后,如何使得他人在使用該項目時,可以自動引用獲得項目中使用

webpack打包項目后,如何使得他人在使用該項目時,可以自動引用獲得項目中使用的第三方依賴?

項目現(xiàn)在需要整合給別人使用,如何做到在其他項目引入我們項目后,不需要添加重復(fù)依賴的第三方包?
這么說可能不是很好理解,我們在用React跟螞蟻金服的Antd,發(fā)現(xiàn)在引入Antd后,他們依賴的第三方包我們是可以直接引用的,不需要再次npm install,拿代碼舉個例子:

  "dependencies": {
    "array-tree-filter": "~1.0.0",
    "babel-runtime": "6.x",
    "classnames": "~2.2.0",
  },

這是antdpackage.json中的一小段,在我們項目中可以直接使用classnames這個第三方包,跟各位請教一下如何做到這一點?

wecpack的CommonsChunkPlugin插件我們也有用,個人推測是作者們做了工具,在打包后的文件中根據(jù)引入文件的id來指向同一個文件? 按這個思路,就有個問題要解決,大家都有node_moudles文件,且在不同路徑,是處理根據(jù)名字指向同一個id的呢?

回答
編輯回答
笨笨噠

你需要了解node modules的依賴是如何管理以及如何加載的:
1.npm install安裝的包會安裝到node_modules目錄下面,某個包依賴的包也會遞歸安裝到mode_modules下面,比如你按照了antd,那么antd和antd依賴的classnames都按照到了node_modules目錄下
2.node是如何進行依賴查找的,參考https://www.cnblogs.com/520ya...,依賴會到node_modules下面去查找

2018年3月11日 15:57
編輯回答
喵小咪

我想先簡答描述下你的問題:
你開發(fā)了一個模塊/組件 A,然后這個A使用了第三方的組件/模塊 (Antd),然后你希望別人使用A組件的時候不需要下載 Antd這個組件/模塊(庫)對嗎?
如果你的問題和我描述的類似,其實在回答之前就需要搞清楚另外一個問題:別人是如何引入你所開發(fā)的組件A?我猜測可能是下面2種方式:

  1. 你把A組件發(fā)布到了某個包管理器,然后別人去下載(npm install 或者 yarn install
  2. 你通過某種腳手架技術(shù)(webpack/gulp等)構(gòu)建一個包,然后發(fā)給別人

上面2種方式你都可以在構(gòu)建你自己的模塊的時候,將依賴代碼也同時構(gòu)建進去,這樣別人在使用你的包的時候就不會出現(xiàn)去下載第三方包的情況了。但是,但是,這樣真的可取嗎?所以再告訴你具體實現(xiàn)方式之前,還是需要思考下你所說的共享模塊/組件的方式是否可?。慨?dāng)然是不可取的,你看看npm上有哪個庫是這樣干的,最明顯的2個缺點:

  1. 包本身體積過大,甚至非常大
  2. 嚴(yán)重重復(fù)依賴,例如:

A模塊依賴1,2,3,4,5,6,7,8這個包,而B模塊依賴了2,3,4,5,6,7這個幾個包。如果這個時候你同時使用A、B模塊,會發(fā)生什么事情?你會發(fā)現(xiàn)2,3,4,5,6,7這個幾個包的代碼你擁有了2份,如果更多依賴呢?整個項目就沒得玩了

  1. 也違背了依賴管理的初衷,將公用的東西抽離,而不是滾雪球,越高越大

有個例外,如果本身自己包里面的業(yè)務(wù)模塊的代碼,當(dāng)然可以封裝到你公開包的內(nèi)部。因為“公共模塊/組件”這個是個相對的。
希望能幫到你,理解不對的地方歡迎指正

2017年6月3日 13:22