npm包 fis3-hook-ikcommonjs 使用教程

在前端开发中，使用模块化编程方式可以方便代码的管理与维护。而在模块化方式中，CommonJs的使用比较广泛。而fis3-hook-ikcommonjs就是为了解决fis3框架中使用CommonJs的问题而开发的一个npm包。本文就是为了介绍一下这个工具的使用。

安装

安装fis3-hook-ikcommonjs可以使用npm，也可以使用yarn。不过我们这里以npm为例：

npm install fis3-hook-ikcommonjs --save-dev

配置

安装完成后，需要在fis3的配置文件中启用fis3-hook-ikcommonjs插件：

fis.hook('commonjs', {
    // 设置编译后文件的后缀名
    extList: ['.js', '.jsx', '.es', '.ts', '.tsx']
});

同时，需要设置fis3默认的模块化规范为CommonJs，可以在fis3的conf文件中添加下面的代码：

-- -------------------- ---- -------
-- -------------------
-------------------- -
    -------- -------- -- -------
    -------- ------- ------- ------ ------- -- -------
---

-- ----
------------------------------ -
    -- -- ---- -----
    ---------- ------------
    ------
    ------ ----
---

在这里，我们假设我们的源代码主要在 ./src/ 目录下，设置了默认的模块化规范和编译后文件的后缀名。

以上代码中，参数中的 baseUrl 和 isMod 分别指定了模块化基础路径和 namespace；extList 则配置了文件后缀名，在require某个模块时可以省略后缀。

使用

fis3-hook-ikcommonjs能够将CommonJs规范的代码转换为符合浏览器环境的代码。在使用fis3-hook-ikcommonjs时，我们可以尽情使用CommonJs规范。

引入模块

var module1 = require('./module1'); // 引入同级目录下的 module1 模块
var module2 = require('./module2.js'); // 引入同级目录下的 module2 模块
var module3 = require('../module3'); // 引入上一级目录下的 module3 模块
var module4 = require('../../module4.js'); // 引入上两级目录下的 module4 模块
var module5 = require('module5'); // 引入基于 baseUrl 的 module5 模块

导出模块

var obj = {
    test1: function() {},
    test2: function() {}
};
module.exports = obj;

测试模块

// test.js文件
var module1 = require('./module1');
module1.test1();

这样就可以轻松测试相应模块是否正确。

示例代码

index.js

// 引入依赖的模块
var content = require('./content');
document.write(content);

content.js

// 导出模块内容
module.exports = "Hello World！";

总结

本文介绍了fis3-hook-ikcommonjs的安装、配置以及常用的引入、导出、测试模块等操作的具体方法。在实际使用中，也可以根据自己的需求进行相关配置，灵活使用此npm包工具，提高前端开发的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c0181e8991b448e5b38