前言
当今互联网快速发展，前端工作越来越重要，前端工具也越来越多。而 npm 包 是前端领域不可或缺的一种资源下载和共享工具，方便了我们的开发和应用。
今天我们要介绍的是一个 npm 包，它的名字是 fis-prepackager-browserify，是一款 fis 前端自动化构建工具的中间件。它使用 browserify 来实现 require('module') 形式的模块化开发。在本文中，我们将以详细的教程介绍 fis-prepackager-browserify 的安装和使用方法，并附带示例代码，希望能够对前端工程师提供帮助。
安装
首先，您需要安装 fis，可以通过以下命令进行安装：
npm install -g fis
注：如果在运行上述命令时出现权限问题，可以使用 sudo 命令。
然后，您需要安装 fis-prepackager-browserify 插件，可以通过以下命令进行安装：
npm install -g fis-prepackager-browserify
注：如果您当前的项目目录已经存在 package.json 文件，您可以将 -g 换成 --save-dev，这样可以将该插件添加到当前项目的依赖中。
使用方法
1.配置 fis-conf.js 文件
您需要在项目的根目录中创建一个文件，文件名为 fis-conf.js。（注：这是一个默认的配置文件，可以通过 -f 参数指定一个自定义的文件名）
在该文件中需要做两个配置：
开启插件
fis.config.set('modules.prepackager', 'browserify'); fis.config.set('settings.prepackager.browserify', { entry: 'src/js/main.js', transform: [ ['browserify-shim', {"jquery":"$"}] ] });配置选项
entry: 指定当前项目的入口文件路径transform: 用来转换非 JavaScript 资源，比如：CSS 和 JSON，使用方法详见官网。
2.运行构建命令
在完成以上配置后，您可以通过以下命令构建您的项目：
fis release -d ./output
运行后，您可以在 ./output 目录中找到编译后的文件。
示例代码
以下示例代码演示了如何在项目中使用 fis-prepackager-browserify。
index.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------- ----------
---- ---- --- - ---------- -- ----------- ---- ---
----- ---------------- -----------------------
---- ----- --- ---------- ---
----- ---------------- ----------------------
-------
------
------------------------------ -------
----
---- - ---- --------- ---- ---- ---
--- -----------------
--- -----------------
-----
---- -- ------ - ---
------- ---------------------- ------------------------------------------
---- -- ------ ----- -------- ---- ---
------- ---------------------- -------------------------
------- ---------------------- ---------------------------
-------
-------app.js 文件：
// 配置 jQuery 和 underscore 模块
var $ = require('jquery');
var _ = require('underscore');
window.$ = $;
window._ = _;
// 将 entry 模块包装成 jQuery 插件
require('./entry.js')($);entry.js 文件：
-- -------------------- ---- -------
-- ----- ----
-------------- - ----------- -
---------------------------- -
-- -- ---- ---- ---- -------
---------------------------- -------------- -
--------------------------------
--------------------------------
---
---
--最后，通过在 package.json 文件中配置以下代码，可以通过 npm run build 的方式自动构建：
"scripts": {
"build": "fis3 release production -d build"
},祝您使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71228