前言
前端开发中，我们经常需要引用一些第三方库或者自己写的模块。最常见的做法是使用 <script> 标签或者 require() 函数进行引用。但是，当我们需要在浏览器环境下使用 CommonJS 模块规范的模块时，我们会遇到一些问题。
browserify-requireify 是一个 npm 包，可以让我们在浏览器环境下使用 CommonJS 模块规范的模块。本文将详细介绍 browserify-requireify 的使用方法和示例代码。
安装
使用 npm 安装 browserify-requireify：
npm install browserify-requireify --save-dev
使用
基本用法
首先，在你的项目中，你需要有一个入口文件 app.js（可能是其他名字）：
// app.js
var foo = require('./foo.js');
console.log(foo);然后，你需要使用 browserify-requireify：
{
"scripts": {
"bundle": "browserify-requireify app.js > bundle.js"
}
}这样，在你的项目根目录下运行：
npm run bundle
就会生成一个 bundle.js 文件，在浏览器中引用即可。
支持 ES6
browserify-requireify 默认不支持 ES6 语法，但是可以使用 babelify 来支持 ES6 语法。首先需要安装 babelify：
npm install babelify --save-dev
然后将 package.json 文件的 scripts 字段修改为：
{
"scripts": {
"bundle": "browserify -t [ babelify ] app.js > bundle.js"
}
}这样就可以在浏览器环境下使用 ES6 语法的模块了。
支持 CSS 和 JSON
通过 browserify-requireify，我们还可以使用 require() 函数引用 CSS 和 JSON 文件。首先安装相关依赖：
npm install cssify --save-dev
npm install jsonify --save-dev
然后将 package.json 文件的 scripts 字段修改为：
{
"scripts": {
"bundle": "browserify -t [ babelify ] -t [ cssify ] -t [ jsonify ] app.js > bundle.js"
}
}这样就可以使用 require() 函数引用 CSS 和 JSON 文件了。
支持第三方库
通过 browserify-requireify，我们还可以在浏览器环境下使用第三方库。首先需要安装相关依赖，例如：
npm install jquery --save
然后在你的代码中使用 require() 函数引用即可：
// app.js
var $ = require('jquery');
console.log($('body'));运行 npm run bundle，浏览器中引用生成的 bundle.js 文件即可。
结论
通过本文，我们介绍了 npm 包 browserify-requireify 的使用方法和示例代码，并详细介绍了如何支持 ES6、CSS、JSON 和第三方库。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde5413