javascript 前后端代码复用 -browserify

Author Avatar
Pang Jian 11月 18, 2015
总字数:706 预计阅读:2 min
  • 在其它设备中阅读本文章

Nodejs 将 javascript 带上了一个新的高度,让之运行于浏览器端的 javascript 可以运行在服务器端。但是 Nodejs 遵循 Commonjs 规范,不能直接运行在浏览器端。虽然是同一种语言,但是前后端有着自己的库,不能复用真是一种浪费。
这时候一个神器出现了,Browserify。通过预编译,可以将 Commonjs 规范的后端 Nodejs 代码直接可以运行在浏览器端。打通了端后端代码复用的壁垒,为 nodejs 程序开辟了一片新天地。

背景

前面一片博客 提到了我需要一种前端解析 Velocity 模板的方法,终于找到一个好的方法。苦于代码是基于 Nodejs 的,readme 中提示可以使用 spm 打包后使用,试了好多次都没有成功。无意间在知乎上发现了 Browserify。顺利满足需求,下一篇博客就会写这部分内容。

Browserify 安装

就像封面图片上那样,使用 npm 全局安装。

$ npm install -g browserify

Browser 使用

参数说明

官方说明如下,部分选项做了翻译

Usage: browserify [entry files] {OPTIONS}

Standard Options:

    --outfile, -o  browserify 日志打印到文件
    --require, -r  绑定模块名或文件,用逗号分隔
    --entry, -e  应用程序的入口
    --ignore, -i  Replace a file with an empty stub. Files can be globs.
    --exclude, -u  Omit a file from the output bundle. Files can be globs. 从其他绑定引入文件
    --external, -x  Reference a file from another bundle. Files can be globs.
    --transform, -t  Use a transform module on top-level files.
    --command, -c  Use a transform command on top-level files.
    --standalone -s  Generate a UMD bundle for the supplied export name.
                   This bundle works with other module systems and sets the name
                   given as a window global if no module system is found.
    --debug -d  Enable source maps that allow you to debug your files separately.
              激活 source maps 调试文件
    --help, -h  Show this message 帮助

示例

编写 Nodejs 服务端脚本,outputName.js,index.js

module.exports = function(name){console.log('Hello '+name);
}
var outputname = require('./outputName.js');
outputname('pangjian');

在 Nodejs 环境下运行结果如下:
Nodejs 环境下运行结果

使用 browserify 预编译一下

$ browserify index.js > bundle.js

之后你就可以直接在浏览器中这样使用:

<script src="bundle.js"></script>

查看浏览器端运行结果:
浏览器端运行结果

当然,你肯定不能满足于将所有脚本全部打包成一个 js 文件,仅仅在 script 标签上引用进来。你需要的也许是将某个模块打包,然后在浏览器的 js 中使用 require(module) 来调用这个模块,这也正是我需要的。那么你需要在执行预编译的时候加上 -r 参数即可。

$ browserify -r outputName.js:ouputname > bundle.js

冒号后面是你指定的模块名称,这样你就可以在 script 标签中这么使用:

<script>
    var outputname = require('ouputname');
    outputname('pangjian');
</script>

好了,大功告成,接下来就是发挥你想象的时间。

Documentation licensed under CC BY-SA 4.0.
本文链接:https://www.pangjian.me/2015/11/18/node-on-browser-browserify/