browserify打包，浏览器支持commonjs的require

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在Web开发的世界中，管理依赖和模块可能是一项艰巨的任务。随着项目复杂性的增加，对高效处理JavaScript模块的强大解决方案的需求也随之增加。这就是Browserify发挥作用的地方。在这篇文章中，苏南大叔将探讨Browserify能解决的现实问题。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，node@20.18.0，Browserify@17.0.1。

Browserify

Browserify是一个强大的工具，它允许开发者在浏览器端的JavaScript代码中使用Node.js风格的require('modules')语句。它将所有的依赖和模块打包成一个可以在网页中s的.js文件。

官网还提到：Browserify的设计初衷是为了让开发者能够在浏览器中使用与Node.js相同的模块系统。这不仅简化了代码的编写和维护，还使得在客户端和服务器端之间共享代码变得更加容易。

官方网站是：

• http://browserify.org/
• https://github.com/browserify

安装Browserify：

npm install -g browserify

使用范例

创建一个简单的项目结构：

    sunan-project/
    ├── bundle.js
    ├── module.js
    └── index.html

在module.js中编写一个简单的commonjs的模块：

module.exports.hola = function () {
    return 'hola，browserify and commonjs';
};
module.exports.author = "苏南大叔";

在main.js中使用这个模块：

var test = require('./module');
console.log(test.hola());
console.log(test.author);

关于这个commonjs代码的写法，可以参考：

• https://newsn.net/say/commonjs.html

浏览器不执行支持

浏览器虽然支持es6的import，但是并不直接支持commonjs模块。所以可能会得到下面的错误提示信息：

Uncaught ReferenceError: require is not defined

打包后支持浏览器

打包命令：

browserify module.js -o bundle.js

index.html:

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

对标产品

除了Browserify，类似功能的打包工具还有：Webpack/Rollup/Parcel/koala/grunt。参考文章：

• https://newsn.net/tag/webpack/
• https://newsn.net/tag/koala/
• https://newsn.net/tag/grunt/

结论

Browserify是现代Web开发中的一个有价值的工具，提供了一系列从模块化代码和依赖管理到提高性能和与Node.js模块兼容性的好处。通过解决Web开发中的常见挑战，Browserify帮助开发者创建更可维护、高效和可扩展的应用程序。

目前的浏览器环境，并不支持require语句的commonjs模块的，但是支持import语句的es6模块。但是，nodejs环境，两者都是支持的。本文的代码，其实也可以用webpack等进行转化。但是Browserify完胜的原因，就在于它的简单。不用任何配置，直接就可以转化。

苏南大叔使用Browserify的最主要原因：就是因为它非常轻便。相比较webpack等来说，简直不要太简单。更多前端文章，请参考苏南大叔的博客。

• https://newsn.net/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。