node如何鏈接多個JS模塊

本文小編為大家詳細介紹“node如何鏈接多個JS模塊”，內容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“node如何鏈接多個JS模塊”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創(chuàng)新互聯(lián)建站：成立于2013年為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設”服務，為上千多家公司企業(yè)提供了專業(yè)的成都網(wǎng)站設計、做網(wǎng)站、成都外貿網(wǎng)站建設公司、網(wǎng)頁設計和網(wǎng)站推廣服務，按需網(wǎng)站建設由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構架，制作客戶同行業(yè)具有領先地位的。

一、個人理解

瀏覽器本身只能做一些展示及用戶交互的功能，對于系統(tǒng)操作的能力很有限，那么，瀏覽器內置的運行環(huán)境顯然不滿足一些更為人性化的開發(fā)模式，比如：更好的區(qū)分功能模塊、實現(xiàn)文件的操作。那么，帶來的缺陷就很明顯，比如：各個 JS文件比較分散，需要在 html頁面里面單獨引入，如果某個 JS文件需要其他的 JS庫，那么很可能會因為 html頁面未引入而報錯，在功能龐大的項目里，手動的管理這些功能文件確實讓人有點捉襟見肘。

那么， node到底是怎么更友好的提供開發(fā)的呢？其實，上面也說了，人為的管理文件依賴不但會消耗大量的精力，還會存在疏漏，那么，是不是以用自動化的方式進行管理就會好很多？是的，在 node的運行環(huán)境里拓寬了對系統(tǒng)的操作能力，也就是說，或許以前開發(fā)者也想通過一些代碼來完成那些機械瑣碎的工作，但是，只有想法沒有操作權限，最后只能望洋興嘆?，F(xiàn)在，可以以 node的一些擴展功能對文件進行先前加工與整理，再添加一些自動化的代碼，最后轉換為一個瀏覽器可識別的、完整的 JS文件，這樣一來，多個文件的內容，便可以匯集到一個文件。

二、創(chuàng)建文件

先創(chuàng)建一些 JS文件，如下圖所示：

node如何鏈接多個JS模塊

這些文件都是手動創(chuàng)建，babel-core這個文件是從全局的 node_modules里面復制出來的，如下圖所示：

node如何鏈接多個JS模塊

為什么要復制出來呢？這是因為，任何腳手架干的事其實都是為了快速搭建，但是，怎么能理解它干的什么事呢？那干脆就直接復制吧，本身，node除了一些內置的模塊，其他的都需要通過指明 require路徑的方式來找到相關模塊，如下圖所示：

node如何鏈接多個JS模塊

通過 require('./babel-core')方法，解析一個功能模塊下的方法。

1、編寫入口文件，轉換ES6代碼

entrance.js作為入口文件，作用就是設定工作從哪開始？怎么開始？那么，這里的工作指的就是轉換ES6代碼，以提供瀏覽器使用。

//文件管理模塊
const fs = require('fs');
//解析文件為AST模塊
const babylon = require('babylon');
//AST轉換模塊
const { transformFromAst } = require('./babel-core');
//獲取JS文件內容
let content = fs.readFileSync('./person.js','utf-8')
//轉換為AST結構，設定解析的文件為 module 類型
let ast = babylon.parse(content,{
    sourceType:'module'
})
//將ES6轉換為ES5瀏覽器可識別代碼
le t { code } = transformFromAst(ast, null, {
    presets: ['es2015']
});
//輸出內容
console.log('code:\n' + `${code}`)

上面的代碼很簡單，最終的目的就是將 module類型的 person.js文件轉換為 ES5。

let person = {name:'wsl'}
export default person

終端運行入口文件，如下所示：

node entrance.js

打印一下代碼，如下圖所示：

"use strict";
//聲明了一個 __esModule 為 true 的屬性
Object.defineProperty(exports, "__esModule", {
  value: true
});
var person = { name: 'wsl' };
exports.default = person;

可以，看到打印的代碼，里面都是瀏覽器能識別的代碼，按照常理，看看能不能直接運行一下？

下面將這段代碼通過 fs功能寫入一個 js文件并讓一個頁面引用，來看看效果：

fs.mkdir('cache',(err)=>{
    if(!err){
        fs.writeFile('cache/main.js',code,(err)=>{
            if(!err){
                console.log('文件創(chuàng)建完成')
            }
        })
    }
})

再次運行命令，如圖所示：

node如何鏈接多個JS模塊

瀏覽器運行結構，如圖所示：

node如何鏈接多個JS模塊

其實代碼生成完就有很明顯的錯誤，未聲明變量，怎么會不報錯呢？這時候，在入口文件輸入之前就需要添加一些自定義輔助代碼，來解決一下這個報錯。

解決的方式也很簡單，將原 code的未聲明的 exports變量通過自執(zhí)行函數(shù)的方式包裹一下，再返回給指定對象。

//完善不嚴謹?shù)腸ode代碼
function perfectCode(code){
    let exportsCode = `
    var exports = (function(exports){
    ${code}
    return exports
    })({})
    console.log(exports.default)`
    return exportsCode
}
//重新定義code
code = perfectCode(code)

看一下輸出完善后的 main.js文件

var exports = (function(exports){
    "use strict";
    Object.defineProperty(exports, "__esModule", {
    value: true
    });
    var person = { name: 'wsl' };
    exports.default = person;
    return exports
})({})
console.log(exports.default)

瀏覽器運行，如圖所示：

node如何鏈接多個JS模塊

現(xiàn)在瀏覽器運行正常了。

2、處理 import 邏輯

既然是模塊，肯定會存在一個模塊依賴另一個或其他很多個模塊的情況。這里先不著急，先看看person模塊引入單一 animal模塊后的代碼是怎樣的？

animal模塊很簡單，僅僅是一個對象導出

let animal = {name:'dog'}
export default animal

person模塊引入

import animal from './animal'
let person = {name:'wsl',pet:animal}
export default person

看下轉換后的代碼

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _animal = require("./animal");
var _animal2 = _interopRequireDefault(_animal);
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj };
}
var person = { name: 'wsl', pet: _animal2.default };
exports.default = person;

可以看到，轉換后會多一個未聲明的 require方法，內部聲明的 _interopRequireDefault方法已聲明，是對 animal導出部分進行了一個包裹，讓其后續(xù)的代碼取值 default的時候保證其屬性存在！

下面就需要對 require方法進行相關的處理，讓其轉為返回一個可識別、可解析、完整的對象。

是不是可以將之前的邏輯對 animal模塊重新執(zhí)行一遍獲取到 animal的代碼轉換后的對象就行了？

但是，這里先要解決一個問題，就是對于 animal模塊的路徑需要提前獲取并進行代碼轉換，這時候給予可以利用 babel-traverse工具對 AST進行處理。

說到這里，先看一下 JS轉換為 AST是什么內容？

這里簡單放一張截圖，其實是一個 JSON對象，存儲著相關的代碼信息，有代碼位置的、指令內容的、變量的等等。

node如何鏈接多個JS模塊

拿到它的目的其實就是找到import對應節(jié)點下的引入其他模塊的路徑

node如何鏈接多個JS模塊

通過 babel-traverse找到 AST里面 import對應的信息

const traverse = require('babel-traverse').default;
//遍歷找到 import 節(jié)點
traverse(ast,{
    ImportDeclaration:({ node })=>{
        console.log(node)
    }
})

輸出看下節(jié)點打印的結構

Node {
  type: 'ImportDeclaration',
  start: 0,
  end: 29,
  loc: SourceLocation {
    start: Position { line: 1, column: 0 },
    end: Position { line: 1, column: 29 }
  },
  specifiers: [
    Node {
      type: 'ImportDefaultSpecifier',
      start: 7,
      end: 13,
      loc: [SourceLocation],
      local: [Node]
    }
  ],
  source: Node {
    type: 'StringLiteral',
    start: 19,
    end: 29,
    loc: SourceLocation { start: [Position], end: [Position] },
    extra: { rawValue: './animal', raw: "'./animal'" },
    value: './animal'
  }
}

可以看到 node.source.value就是 animal模塊的路徑，需要的就是它。

擴展入口文件功能，解析 import下的 JS模塊，

添加 require方法

//完善代碼
function perfectCode(code){
    let exportsCode = `
        //添加require方法
        let require = function(path){
            return {}
        }

        let exports = (function(exports,require){
            ${code}
            return exports
        })({},require)
    `
    return exportsCode
}

這樣轉換完的 main.js給不會報錯了，但是，這里需要解決怎么讓 require方法返回 animal對象

let require = function(path){
    return {}
}

let exports = (function(exports,require){
    "use strict";
    Object.defineProperty(exports, "__esModule", {
        value: true
    });

    var _animal = require("./animal");
    var _animal2 = _interopRequireDefault(_animal);
    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
    var person = { name: 'wsl', pet: _animal2.default };
    exports.default = person;
    return exports
})({},require)

下面就需要添加 require方法進行 animal對象的返回邏輯

//引入模塊路徑
let importFilesPaths = []
//引入路徑下的模塊代碼
let importFilesCodes = {}

//獲取import節(jié)點，保存模塊路徑
traverse(ast,{
    ImportDeclaration:({ node })=>{
        importFilesPaths.push(node.source.value)
    }
})

//解析import邏輯
function perfectImport(){
    //遍歷解析import里面對應路徑下的模塊代碼
    importFilesPaths.forEach((path)=>{
        let content = fs.readFileSync(path + '.js','utf-8')
        let ast = babylon.parse(content,{
            sourceType:'module'
        })
        let { code } = transformFromAst(ast, null, {
            presets: ['es2015']
        });
        //轉換code
        code = perfectImportCode(code)
        importFilesCodes[path] = code
    })
}

//完善import代碼
function perfectImportCode(code){
    let exportsCode = `(
        function(){
                let require = function(path){
                    let exports = (function(){ return eval(${JSON.stringify(importFilesCodes)}[path])})()
                    return exports
                }
                return (function(exports,require){${code}
                    return exports
                })({},require)
            }
        )()
    `
    return exportsCode
}

//完善最終輸出代碼
function perfectCode(code){
    let exportsCode = `
        let require = function(path){
            let exports = (function(){ return eval(${JSON.stringify(importFilesCodes)}[path])})()
            return exports
        }
        let exports = (function(exports,require){
            ${code}
            return exports
        })({},require)
        console.log(exports.default)
    `
    return exportsCode
}

上面的代碼其實沒有什么特別難理解的部分，里面的自執(zhí)行閉包看著亂，最終的目的也很清晰，就是找到對應模塊下的文件 code代碼進行自運行返回一個對應的模塊對象即可。

看下轉換后的 main.js代碼

let require = function(path){
    let exports = (function(){ return eval({"./animal":"(\n function(){\n let require = function(path){\n let exports = (function(){ return eval({}[path])})()\n return exports\n }\n return (function(exports,require){\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar animal = { name: 'dog' };\n\nexports.default = animal; \n return exports\n })({},require)\n }\n )()\n "}[path])})()
    return exports
}

let exports = (function(exports,require){
    "use strict";
    Object.defineProperty(exports, "__esModule", {
    value: true
    });

    var _animal = require("./animal");
    var _animal2 = _interopRequireDefault(_animal);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }


    var person = { name: 'wsl', pet: _animal2.default };
    exports.default = person;
    return exports
})({},require)
console.log(exports.default)

刷新瀏覽器，打印結果如下：

node如何鏈接多個JS模塊

可以看到，pet屬性被賦予了新值。

三、完整的入口文件代碼

const fs = require('fs');
const babylon = require('babylon');
const traverse = require('babel-traverse').default;
const { transformFromAst } = require('./babel-core');
//解析person文件
let content = fs.readFileSync('./person.js','utf-8')
let ast = babylon.parse(content,{
    sourceType:'module'
})

//引入模塊路徑
let importFilesPaths = []
//引入路徑下的模塊代碼
let importFilesCodes = {}

//保存import引入節(jié)點
traverse(ast,{
    ImportDeclaration:({ node })=>{
        importFilesPaths.push(node.source.value)
    }
})

//person.js 對應的code
let { code } = transformFromAst(ast, null, {
    presets: ['es2015']
});

//解析import邏輯
function perfectImport(){
    importFilesPaths.forEach((path)=>{
        let content = fs.readFileSync(path + '.js','utf-8')
        let ast = babylon.parse(content,{
            sourceType:'module'
        })
        let { code } = transformFromAst(ast, null, {
            presets: ['es2015']
        });
        code = perfectImportCode(code)
        importFilesCodes[path] = code
    })
}

//完善import代碼
function perfectImportCode(code){
let exportsCode = `
    (
    function(){
        let require = function(path){
        let exports = (function(){ return eval(${JSON.stringify(importFilesCodes)}[path])})()
            return exports
        }
        return (function(exports,require){${code}
            return exports
        })({},require)
        }
    )()
    `
    return exportsCode
}

//開始解析import邏輯
perfectImport()

//完善最終代碼
function perfectCode(code){
    let exportsCode = `
        let require = function(path){
            let exports = (function(){ return eval(${JSON.stringify(importFilesCodes)}[path])})()
            return exports
        }
        let exports = (function(exports,require){
            ${code}
            return exports
        })({},require)
        console.log(exports.default)
    `
    return exportsCode
}

//最后的代碼
code = perfectCode(code)

//刪除文件操作
const deleteFile = (path)=>{
    if(fs.existsSync(path)){
        let files = []
        files = fs.readdirSync(path)
        files.forEach((filePath)=>{
            let currentPath = path + '/' + filePath
            if(fs.statSync(currentPath).isDirectory()){
                deleteFile(currentPath)
            } else {
                fs.unlinkSync(currentPath)
            }
        })
        fs.rmdirSync(path)
    }
}

deleteFile('cache')

//寫入文件操作
fs.mkdir('cache',(err)=>{
        if(!err){
            fs.writeFile('cache/main.js',code,(err)=>{
            if(!err){
                console.log('文件創(chuàng)建完成')
            }
        })
    }
})

讀到這里，這篇“node如何鏈接多個JS模塊”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標題：node如何鏈接多個JS模塊
網(wǎng)頁URL：http://muchs.cn/article2/pdpjoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、網(wǎng)站營銷、外貿建站、網(wǎng)站內鏈、ChatGPT、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

node如何鏈接多個JS模塊

一、個人理解

二、創(chuàng)建文件

三、完整的入口文件代碼

二、創(chuàng)建文件

三、完整的入口文件代碼