Nodejs CommonJS 模块编译到浏览器的命令.. browserify, stitch, commonjs-everywhere

Nodejs CommonJS 模块编译到浏览器的命令… browserify, stitch, commonjs-everywhere

感觉终于要熬出头了… 早点是 node-browserify, 但是想到有某些问题也没去尝试 发现还有个 coffeeify:coffeeify 插件, 用来编译 coffee 然后看到 Recursive Drawing 项目有用 stitch, 也是相近的功能, 大概简单很多 另外还有 component 项目, 也是编译成一个文件…

然后这几天看到个项目, 叫 commonjs-everywhere 作者是 CoffeeScript 2.0 作者, 按 README 这也是编译合并 JS 文件 不同在于, 这里使用了 SourceMap 对源码内容进行定位 从截图看, CoffeeScript 源码也是支持的, 终于要熬出头了… 只是目前项目还处于开发当中…

demo

CoffeeScript 早上发布了 1.6.1 , 开始支持 SourceMap… 虽然有点小 bug… 感觉总之浏览器端终于看到希望了


4 回复

Node.js CommonJS 模块编译到浏览器的命令: browserify, stitch, commonjs-everywhere

在 Node.js 中，CommonJS 是一种流行的模块系统。然而，浏览器并不直接支持 CommonJS。为了将 Node.js 的 CommonJS 模块转换为可以在浏览器中运行的代码，我们可以使用一些工具，如 browserify、stitch 和 commonjs-everywhere。

1. browserify

browserify 是最常用的工具之一，它可以将 Node.js 的 CommonJS 模块打包成一个单独的 JavaScript 文件，以便在浏览器中运行。

安装

npm install -g browserify

使用示例

假设你有一个简单的模块结构：

  • index.js
  • moduleA.js

index.js:

const moduleA = require('./moduleA');

console.log(moduleA.hello());

moduleA.js:

module.exports = {
    hello: function() {
        return 'Hello from moduleA';
    }
};

使用 browserify 打包这些模块：

browserify index.js -o bundle.js

这会生成一个 bundle.js 文件，其中包含了所有依赖的模块，并且可以被浏览器加载和执行。

2. stitch

stitch 是另一个工具，它也可以处理 CommonJS 模块。它的配置相对简单，但功能不如 browserify 强大。

安装

npm install -g stitch

使用示例

假设你有一个简单的模块结构：

  • index.js
  • moduleA.js

index.js:

const moduleA = require('./moduleA');

console.log(moduleA.hello());

moduleA.js:

module.exports = {
    hello: function() {
        return 'Hello from moduleA';
    }
};

使用 stitch 打包这些模块：

stitch --path moduleA.js --path index.js -o bundle.js

3. commonjs-everywhere

commonjs-everywhere 是一个较新的工具，它利用 SourceMap 技术来更好地支持调试。虽然它还在开发中，但它提供了一些独特的功能，如支持 CoffeeScript。

安装

npm install -g commonjs-everywhere

使用示例

假设你有一个简单的模块结构：

  • index.coffee
  • moduleA.coffee

index.coffee:

moduleA = require './moduleA'

console.log moduleA.hello()

moduleA.coffee:

module.exports =
    hello: ->
        'Hello from moduleA'

使用 commonjs-everywhere 打包这些模块：

commonjs-everywhere index.coffee -o bundle.js

以上就是使用 browserify, stitch 和 commonjs-everywhere 将 Node.js 的 CommonJS 模块编译到浏览器的基本步骤。每种工具都有其特点，你可以根据自己的需求选择合适的工具。


我一定要吐槽一下 Browserify, 有了 SourceMap 以后感觉太好了 Journey From RequireJS to Browserify http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify/ coffeeify 现在似乎有 bug, 因为作者不写 coffee, 以后应该会好的

https://github.com/mootools/wrapup 真正好用的

在这个帖子中，您提到了几个工具用于将Node.js中的CommonJS模块编译到浏览器环境中。这些工具包括browserify, stitch, 和commonjs-everywhere。下面我会逐一介绍这些工具，并提供一些基本示例代码。

1. Browserify

Browserify 是一个非常流行的工具，可以让你在浏览器中使用Node.js风格的模块化编程方式（即CommonJS模块）。通过打包所有依赖项为一个单一的JavaScript文件，它使你可以直接在网页上运行Node.js模块。

安装

npm install -g browserify

基本用法 假设你有一个简单的模块文件module.js:

// module.js
exports.hello = function() {
    return "Hello, World!";
};

另一个文件main.js：

var mod = require('./module.js');
console.log(mod.hello());

你可以使用browserify命令来打包这个文件到浏览器可执行的形式：

browserify main.js > bundle.js

这将会生成一个名为bundle.js的文件，你可以将它添加到HTML文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

2. Stitch

Stitch 是另一个处理模块打包的工具，与Browserify类似，但它更侧重于简化过程，提供了一个简单的API来管理模块。

安装

npm install -g stitch

基本用法 Stitch的使用相对直接，它可以自动发现并打包你的所有依赖项。如果你的目录结构与上述Browserify的例子相似，你可以通过以下命令打包：

stitch build --standalone MyLibrary main.js > bundle.js

这里--standalone选项使得你可以在全局命名空间下使用打包后的库。

3. CommonJS-Everywhere

CommonJS-Everywhere 是一个较新的工具，旨在提供更好的SourceMap支持，这意味着即使在浏览器中，也可以获得类似于开发环境下的调试体验。不过这个工具目前还在开发阶段。

以上就是对这些工具的一些基本介绍和示例。每个工具都有其特点和适用场景，选择哪个取决于你的具体需求。

回到顶部