概述
在前端工程化开发过程中，常常会使用各种工具和框架来实现代码的模块化开发和管理。fis3-hook-commonjs 是一个非常常用的 npm 包，它可以将 CommonJS 模块化规范转换成浏览器可识别的 AMD 或 CMD 规范，从而方便我们在浏览器环境中使用和管理模块。
本文将介绍如何使用 fis3-hook-commonjs 包来完成前端模块化开发。
安装
安装 fis3-hook-commonjs 包可以通过 npm 包管理器进行安装：
npm install fis3-hook-commonjs
配置
在使用 fis3-hook-commonjs 包之前，需要进行相应的配置，以便让 fis3 工具认识 CommonJS 模块。
在 fis3 配置文件中增加以下配置：
fis.hook('commonjs', {
extList: ['.js', '.jsx']
});其中，extList 用于指定需要转换成 AMD 或 CMD 规范的文件扩展名。示例配置仅将 .js 和 .jsx 文件转换，并可根据实际需求做出调整。
使用
导出模块
在 CommonJS 中，通过 module.export 或 exports 导出模块。例如：
-- -------------------- ---- -------
-- --------
--- ---- - --------
--- --- - ---
-------------- - -
----- -----
---- ----
------ -------- -- -
---------------- - ---- ------
-
-或者：
-- -------------------- ---- ------- -- ------ --- ---- - -------- --- --- - --- ------------ - ----- ----------- - ---- ------------- - -------- -- - ---------------- - ---- ------ -
导入模块
在 CommonJS 中，通过 require 导入模块。例如：
// index.js
var foo = require('./foo');
console.log(foo.name); // David
console.log(foo.age); // 28
foo.sayHi(); // Hi, I am David示例
环境准备
使用示例需要先安装 fis3、fis-parser-babel-6.x，可以通过以下命令进行安装：
npm install fis3 fis-parser-babel-6.x -g
项目结构
-- -------------------- ---- ------- --- ------- - --- ------ - --- ------ --- ---- - --- ---------- --- ------ - --- -- - --- ------- - --- ---------- --- -----------
代码示例
-- -------------------- ---- -------
-- --------------
-------------- - -
----- --------
---- ---
------ -------- -- -
---------------- - ---- -----------
-
--
-- --------------
--- --- - -----------------
-------------- - -
---- ----
--------- -------- -- -
------------------- - ---- ----------
-
--
-- -----------------
--------------- --------- -
--- --- - -----------------------------
--------------------- -- - ----- -------- ---- --- ------ ---------- ------ -
--------------- -- ------ - -- -----
---
-- --------------------
--------- -------- -
-------- ------------- -------- -
-- ------- ---- --- ----------- -
------- - -----
---- - ---
-
--- ----------- - ---
-------- --------- ----- -
-- ------------------ -
------ -------------------------
-
--- ------ - -
-------- --
--
---------------- - -------
--- ------ - ---------------------------------
----------- - ------------------
---------- - ----
------------ - -----
------------- - -------- -- -
------------------- ------------------------------------
--
----------------------------------
------ ---------------
-
------ ------------------------------
-
-------------- - --------
-----------
-- ---------------
--------- -----
----- ----------
------
----- ----------------
----------------------
-------
------
------- ---------------------------------------
--------
----------------------------------
---------
-------
-------构建 & 运行
在项目目录下执行 fis3 release 命令进行构建，构建完成后在浏览器中打开 page/index.html 页面即可看到输出结果。
结论
通过使用 fis3-hook-commonjs 包，我们可以轻松地将 CommonJS 模块化规范转换成浏览器可识别的 AMD 或 CMD 规范，从而方便我们在浏览器环境中使用和管理模块。同时，本文还提供了一个简单的示例，通过该示例我们可以更好地理解和掌握 fis3-hook-commonjs 包的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63544