如何在构建时使用注释在另一个 javascript 中插入 javascript 文件答案

【问题标题】：How to insert a javascript file in another javascript at build time using comments如何在构建时使用注释在另一个 javascript 中插入 javascript 文件
【发布时间】：2022-01-06 20:06:19
【问题描述】：

在 npm 或 VS Code 或任何地方是否有可以基于 cmets 捆绑或连接 Javascript 文件的东西，例如：

function myBigLibrary(){
    //@include util.js
    //@include init.js

    function privateFunc(){...}

    function publicFunc(){
      //@include somethingElse.js
      ...
    }

    
    
    return {
        init, publicFunc, etc
    }
}

或者类似的东西？我认为当您的 javascript 文件变得非常大时，这种情况很常见。我能找到的都是复杂的东西，比如 webpack。

我正在寻找任何等效的解决方案，允许您在其他代码的任意位置包含任意代码。我想这会给智能感知带来麻烦，但扩展程序可以解决这个问题。

【问题讨论】：

只是让你的脚本全局作用域？
这如何帮助我将它们组合成一个文件以用作库？
啊，我可以很容易地使用节点、fs 和字符串替换。我只是很惊讶没有人能做出这样简单的事情。我稍后会发布答案。

标签： javascript build

【解决方案1】：

我不确定你的真正意思是什么，但如果你的意思是链接来自其他 javascript 文件的变量。可能这会帮助你
const { variable name } = require(the javascript file path)
示例：
在 index.js 中

const { blue } = require('./../js/blue.js)
console.log(blue)

同时在 blue.js 中

const blue = "dumbass"

如果这对您没有帮助，请忽略它

【讨论】：

是的，这不是我要找的。我想从多个文件中构建单个 javascript 文件，并且我需要在其他代码中包含代码。

【解决方案2】：

所以这是实现我想要的简单方法。我一直在学习更多关于如何使用 esbuild 或其他捆绑程序做事的信息，但我并没有完全找到适合我需要的东西。这更简单，更灵活。它适用于任何文件类型。当文件更改时，您可以使用 nodemon 而不是 node 来运行此代码进行自动更新。

const fs = require('fs')
/////////////////////////

const input  = 'example.js'
const output = 'output.js'

const ext    = '.js'

// looks for file with optional directory as: //== dir/file
const regex  = /\/\/== *([\w-\/]+)/g


const fileContent = fs.readFileSync(input).toString()


// replace the comment references with the corresponding file content
const replacement = fileContent.replace(regex, (match, group)=>{

    const comment = '//////// '+group+ext+' ////////\n\n'
    const replace = fs.readFileSync(group+ext).toString()
    return comment + replace

})

// write replacement to a file
fs.writeFileSync(output, replacement)

【讨论】：

请注意，我将格式从//@include更改为//==，文件名不需要扩展名。