騰訊 IVWEB 團隊: fis3 commonJs 中的 moduleId

時間 2019-11-16

標籤騰訊 ivweb 團隊 fis3 fis commonjs moduleid 欄目騰訊简体版

原文原文鏈接

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！javascript

做者：feix760html

首先看一個有趣的問題

// 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…java

此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處
原文連接：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎你們前往騰訊雲技術社區web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。