Nodejs：让 Node 模块跑在浏览器里, Browserify

Nodejs：让 Node 模块跑在浏览器里, Browserify

介绍

Browserify 是一个强大的工具，它允许你在浏览器中使用 Node.js 模块系统。这意味着你可以使用 require 和 module.exports 来组织你的前端代码，就像在 Node.js 中一样。这不仅提高了代码的可维护性，还简化了模块管理。

安装与基本使用

首先，你需要安装 Browserify。你可以通过 npm 来安装它：

npm install -g browserify

接下来，假设你有一个简单的项目结构：

project/
├── main.js
├── lib.js
└── lib-2.js

main.js 可以这样编写：

// main.js
const lib = require('./lib');
const lib2 = require('./lib-2');

console.log(lib());
console.log(lib2());

lib.js 和 lib-2.js 可以是这样的：

// lib.js
module.exports = function() {
    return 'Hello from lib.js';
};

// lib-2.js
module.exports = function() {
    return 'Hello from lib-2.js';
};

使用 Browserify 编译这些文件：

browserify -d main.js -o build.js

这里 -d 参数用于生成 SourceMap，方便调试。

使用 CoffeeScript

如果你喜欢使用 CoffeeScript，你可以通过安装 coffeeify 来处理 .coffee 文件：

npm install -g coffeeify

然后你可以这样编译：

browserify -dt coffeeify main.coffee -o build.js

注意，CoffeeScript 的 require 需要指定文件扩展名：

# main.coffee
lib = require('./lib.coffee')
lib2 = require('./lib-2.coffee')

console.log lib()
console.log lib2()

调试

在 Chrome 开发者工具中启用 SourceMap 功能，可以让你轻松地调试源码。只需在 Sources 面板中打开你的源码文件即可。

前端调试体验

前端开发也应该像 node-dev 一样，能够实时保存并重新加载代码。随着 Node.js 在前端工具链中的应用越来越广泛，这种实时开发体验变得越来越重要。

总结

Browserify 让你在浏览器中使用 Node.js 模块系统变得更加简单。通过它可以轻松地将 Node.js 代码转换为可以在浏览器中运行的代码，并且提供了 SourceMap 支持，使得调试更加方便。希望未来 Browserify 能够支持更多的功能，如更好的 CoffeeScript 支持和更好的前端开发体验。