粗糙的玩一玩javascript的"编译"(2)css也能"编译"？

本文介绍了一种将CSS样式编译到JavaScript文件中的方法，通过Node.js的内置模块操作，实现了只用一个JS文件即可加载所有网页内容及样式的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在项目根目录下新建一个css.css

*{color:red;}

2.html引用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>hello,nodeJS</h1>
<script src="build.js"></script>
</body>
</html>

这里写图片描述

问题来了：我们如何把css也“编译”到js文件理呢？

var getlib = require("myLib");

// 引入node的一个内置模块
var file = require("fs");
file.writeFile("build.js","");

// 生成网页代码
function genCode(key,value){
    return "var "+key+" = "+value+";\n";
}

// 读取css
file.readFile("./css.css",function(error,data){
    if(!error){
        file.appendFile("build.js","document.write('<style>"+data+"</style>')");
    }
})

for(var i=0;i<global.process.mainModule.children.length;i++){
    var child = global.process.mainModule.children[i];
    for(var k in child.exports){
        file.appendFile("build.js",genCode(k,child.exports[k]));
    }
}

我们在终端 node 上面的文件，就完成了”编译”。

这样html只需要引入编译之后的build.js文件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<h1>hello,nodeJS</h1>
<script src="build.js"></script>
</body>
</html>