騰訊 IVWEB 團隊: fis3 commonJs 中的 moduleId

騰訊雲加社群發表於2019-01-25
WebS3JS

騰訊雲技術社群-掘金主頁持續為大家呈現雲端計算技術文章，歡迎大家關注！

作者：feix760

首先看一個有趣的問題

// fis-conf.js
fis.hook(`commonjs`)
    .match(`/modules/common/utils`, {
        isMod: true,
        moduleId: `utils`  // 為utils設定一個moduleId，希望以後能直接require(`utils`)
    })
    .match(`::package`, {
        postpackager: [
            fis.plugin(`loader`, {
                resourceType: `commonJs`
            })
        ]
    })複製程式碼
<!-- main.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- etc.. --->
    <script>
        require(`utils`)
    </script>
</body>
</html>複製程式碼

想象中理想的輸出

<!-- main.html -->
<html>
    <script src="/modules/common/utils.js"></script>
</html>複製程式碼
// /modules/common/utils.js
define(`utils`, function() {
    // ...
})複製程式碼

實際結果

<!-- main.html -->
<html lang="en">
    <!-- 不會有utils.js的引用，也就意味著fis並不能發現用moduleId直接引用的依賴 -->
    <!-- script src="/modules/common/utils.js"></script-->
</html>複製程式碼
// /modules/common/utils.js
define(`utils`, function() {
    // ...
})複製程式碼

解讀

  • 實際上moduleId只決定本身的define語句
  • 要讓fis識別出類似moduleId的短引用，可以配置commonJs的paths/packages對映
fis.hook(`commonjs`, {
    paths: {
        utils: `/modules/common/utils.js`
    }
})複製程式碼
  • 尋找檔案依賴是在lookup階段完成，lookup階段並不是一個包含所有檔案的階段，而是處理單個檔案的階段，因此沒有所有檔案moduleId的對映表。lookup函式需要返回兩個資訊: moduleId和fileId, moduleId用於替換require()語句( 注②)，fileId加入依賴中，所以lookup返回的moduleId需和相關檔案的moduleId一致，否則會出現以下錯誤：
define(`lib/A.js`, function() {
})複製程式碼
<!-- main.html -->
<html>
    <script>
        require(`modules/lib/A.js`);
    </script>
</html>複製程式碼

注② lookup返回的moduleId

var A = require(`lib/A.js`)複製程式碼

編譯成：

define(`XX`, function() {
    var A = require(`modules/lib/A.js`)
})複製程式碼

原文連結：ivweb.io/topic/565c5…

相關推薦
Fibonacci Sequences in JavaScript with/without recursive
前端開發框架簡介:angular和react
騰訊雲CDN免費體驗

此文已由作者授權騰訊雲技術社群釋出，轉載請註明文章出處
原文連結：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎大家前往騰訊雲技術社群

相關文章