使用nodejs进行Browserify无法正常工作

时间:2015-12-25 18:18:34

标签: node.js browserify

我正在创建一个示例应用程序来学习如何将nodejs用于客户端。我在运行此练习之前已经安装了:node,npm和browserify;

目录结构

lesseon1
 - index.html
 - application.js
 - js
   - data.js
   - listdata.js

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Node Lesson 1</title>
    <script type="text/javascript" src="application.js"></script>
</head>
<body>
<div id="names"></div>
    <script type="text/javascript">
        var ol = document.createElement("ol");
        ol.innerHTML = window.list;
        document.getElementById("names").appendChild(ol);
    </script>
</body>
</html>

listdata.js

var jsonData = require("./data.js");

for(item in jsonData){
    console.log(jsonData[item].name);
    window.list += "<li>" + jsonData[item].name + "</li>";
}

console.log(window.list);

data.js

var json = [{
    "name" : "Rohit"
    },{
    "name" : "Amit"
    },{
    "name" : "Arti"
    }];

使用browerify生成application.js

~/node_modules/.bin/browserify -e js/listdata.js -o application.js

问题:

它也在浏览器和浏览器控制台中打印未定义。但是,如果我在index.html中复制粘贴js代码,一切正常。 在listdata.js中,有2个console.log()语句。但它只执行最后一次。

我错过了什么吗?或以错误的方式做某事。

1 个答案:

答案 0 :(得分:1)

您未从data.js导出。

var json = [{
    "name" : "Rohit"
    },{
    "name" : "Amit"
    },{
    "name" : "Arti"
    }];
module.exports = json;

或者您可以更改为data.json,只需输入有效的json而不varexports,并在listdata.js中将其用作var jsonData = require("./data.json");

每个require d文件,browserify wraps into function,带有function (require, module, exports)签名。这就是为什么你可能没有全局变量的原因。如果您愿意,请使用global.window.