什么是 requirey？
requirey 是一个可以让你在浏览器端像在 Node.js 中一样使用 CommonJS 规范 require 函数的 npm 包。
在前端开发中，我们经常需要引入其他的 JavaScript 文件，例如一些库、插件、组件等等，这时我们就需要用到 script 标签来引入这些文件。但是，这样容易出现文件依赖关系混乱、命名冲突等问题。
使用 requirey 可以轻松地解决这些问题，通过在 JavaScript 文件中使用 require 函数来引入其他文件，还能实现模块化开发，提高代码的可维护性和可读性。
安装和使用
安装 requirey：
npm install requirey --save
使用 requirey：
在你的入口文件中，如 app.js，使用 requirey：
-- -------------------- ---- ------- -- -- -------- --- -------- - -------------------- -- -- ------- ------ --- ------- - --------------------- --- ------- - --------------------- -- -------- ------------------ ------------------
在 moduleA.js 中，定义了一个 methodA 方法：
module.exports.methodA = function() {
console.log('Hello, requirey!');
};在 moduleB.js 中，引入了 moduleA.js 并定义了一个 methodB 方法，并调用了 moduleA.js 中的 methodA 方法：
var moduleA = require('./moduleA');
module.exports.methodB = function() {
console.log('This is methodB.');
moduleA.methodA();
};以上代码代码展示了 require 函数的使用方法：通过 require 函数引入其他 JavaScript 文件，并使用其中的方法。
当 app.js 被浏览器加载时，requirey 会自动下载并解析所有被 require 函数引入的 JavaScript 文件，保证每个模块被正确加载和执行。
API
require(moduleName)
require 函数用于引入其他模块。根据传入的 moduleName 参数，会依次查找是否存在这个模块。当找到模块时，会加载并执行这个模块的 JavaScript 文件，并将该模块的 module.exports 对象返回。如果找不到模块，会抛出一个 Error。
require.define(moduleName, moduleDefinition)
require.define 函数用于手动定义一个模块。传入 moduleName 参数表示模块的名称，传入 moduleDefinition 参数表示模块的定义。该函数通常用于在浏览器中动态加载代码段、处理 AJAX 回调方法等场景。
-- -------------------- ---- -------
-- ------
----------------------- ---------- -
-------- ------ -- -
------ - - --
-
-------- -------- -- -
------ - - --
-
-- - --- - ----- ------------
------ -
---- ----
------ -----
--
---
-- -----
--- ----- - -----------------
------------------------ ---- -- -
-------------------------- ---- -- -require.browserify(moduleName, moduleUrl)
require.browserify 函数用于动态加载其他 JavaScript 文件。如果该文件遵循 CommonJS 规范，则可以使用 require 函数来引入其中的模块。
// 在浏览器中动态加载并使用 jQuery 模块
require.browserify('jquery', 'https://code.jquery.com/jquery-3.3.1.min.js');
var $ = require('jquery');
console.log($('body').html());使用技巧
- 在项目初期规划时，建议使用模块化编程，将不同类型的 JavaScript 文件拆分成多个小文件。一个文件只处理一个功能，不要让文件变得过于臃肿。
- 将公用的文件单独抽出，放置于特定的目录中，并使用
require函数进行引入。 - 尽量使用
require.define函数手动定义模块，避免出现重复的代码段。 - 将所有需要动态加载的文件都使用
require.browserify函数来引入。同时，为了避免过多的网络请求，建议将这些文件通过工具进行打包，生成一个较为集中的文件，且要注意不要将所有文件都打包到一个文件中，否则文件体积会过大、加载时间会过长。 - 使用
CDN加速，同时在项目打包前使用 Code Splitting 技术将 JavaScript 打包成多个文件。这样做可以大大缩短项目的页面响应时间和加载时间。 - 当项目较大时，可以使用第三方工具对代码进行静态分析和优化。例如：
Webpack、Rollup等等。
总结
requirey 是一个非常实用的 npm 包，可以将前端项目进行模块化开发，提高代码的可维护性和可读性。其使用方法简单，只需在 JavaScript 文件中使用 require 函数引入其他文件即可。同时，该包还提供了一些辅助函数，例如 require.define、require.browserify 等，可以方便地动态加载代码段、处理 AJAX 回调方法等常见场景。
在实际开发中，建议将需要动态加载的文件通过工具进行打包，同时使用第三方工具对代码进行静态分析和优化，以提升项目的响应时间和加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad181e8991b448d868e