粗糙的玩一玩javascript的"编译"(1)

最新推荐文章于 2018-09-25 22:04:00 发布

学习笔记666

最新推荐文章于 2018-09-25 22:04:00 发布

阅读量481

点赞数

分类专栏： nodejs+gulp+webpack+sass基础篇

本文链接：https://blog.csdn.net/github_26672553/article/details/52176252

版权

nodejs+gulp+webpack+sass基础篇专栏收录该内容

33 篇文章 0 订阅

订阅专栏

我们的浏览器能加载之前我们写的js？

新建个html，来试验一下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<script src="index.js"></script>
</body>
</html>

这里写图片描述
控制台报了：ReferenceError: require is not defined
很遗憾，在网页中还不支持require 这个语法（不代表未来不支持）。

开动大脑
既然node能运行index.js，那么我们是否可以通过nodeJS把require出来的东西给生成一个网页可以识别的代码呢？

var getlib = require("myLib");

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

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

for(var k in getlib){
    file.appendFile("build.js",genCode(k,getlib[k]));
}

上面我们就把myLib模块理的js”编译”成了我们网页认识的js了。
我们在html理，引入build.js试试：

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

这次没有报require is not defined, 说明编译成功。
我们来看看build.js，确实都是我们都网页能认识的js代码：

var age = 22;
var showName = function (){
    console.log('showName');
};

而”编译”之前，我们myLib模块是这样的：

exports.age = 22;
exports.showName = function(){
    console.log('showName');
}

学习笔记666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粗糙的玩一玩javascript的"编译"(1)

我们的浏览器能加载之前我们写的js？新建个html，来试验一下：<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"></head><body><script src="index.js"></script></body></html> 控制台报了：ReferenceError: requi
复制链接

扫一扫