避免在ES6 JavaScript Web項目中導入深層嵌套的模塊

Question

我正在嘗試解決我目前在JavaScript項目結構中遇到的問題。 我正在用webpack編寫ES6語法。 我當前的目錄結構如下所示

project-dir
  |_ packages.json
  |_ webpack.config.js
  |_ html
  |  |_ ***
  |  |_ ***
  |_ js
     |_ app.js
     |_ routes
        |_ abc-component
        |  |_ components
        |  |  |_ abc1.js
        |  |  |_ abc2.js
        |  |_ index.js
        |
        |_ xyz-component
        |  |_ components
        |  |  |_ xyz1.js
        |  |  |_ xyz2.js
        |  |_ index.js
        |_ reducers.js

這是更簡單的結構。 但是問題是“ reducers.js”和“ abc1.js / xyz1.js”需要訪問相同的功能。 因此，如果該功能存在於“ reducers.js”中，則“ abc1.js / xyz1.js”必須將其導入為“ ../../reducers.js”。 如果該功能分散在“ abc1.js”和“ xyz1.js”等中，則“ reducers.js”將必須將每個導入為“。\\ abc-component \\ components \\ abc1.js”和“ \\ XYZ分量\\分量\\ xyz1.js”。 第一種方式，感覺就像是我正在上升；第二種方式，感覺就像是我正在上升。 該代碼還受文件布局結構的限制。 此目錄結構可能會更深入，最終我們將得到非常丑陋的導入。

因此，對我來說，將由reducers.js和“ abc1 / js / xyz1.js”共享的此功能引入另一個模塊是有意義的。 為此，我考慮將其放入另一個git倉庫中，但是此功能是非常特定於項目的，並且不希望將其放入另一個倉庫中的麻煩。

我嘗試在“ js”文件夾下創建一個“ lib”文件夾，並將其常用功能以及packages.json文件放入該文件夾中。 這樣，我想我只是將其作為“依賴項”添加到項目的package.json文件中，並帶有“ file：\\ lib \\ common”值。 這樣，它將在本地引用該模塊。 但這使我陷入了麻煩。 我遇到的問題是1）由於webpack無法處理，所以我無法在此通用模塊中編寫ES6 2）每次更改common.js中的內容時，我都必須運行“ npm install” 3）npm似乎是在我更改公共模塊並運行“ npm install”之后，就緩存該公共模塊的舊版本。 不知道它來自哪里，我確實通過運行“ npm cache clean”來清理npm緩存4）即使我只是在此通用模塊中而不是ES6中編寫舊的javascript，webpack watch也不接受對該文件的更改並重新-渲染應用程序。

我想知道我是否可以對如何最好地解決這個問題有一些想法。 另外，對我如何嘗試並在解決本地模塊問題方面異常失敗的想法也會很有幫助。

Answer 1

一種解決方法是將您的通用代碼放入節點模塊，然后像導入其他任何庫一樣將其導入。

這將與您建議的“ lib”想法類似，但是不需要相對導入。