简介
fis3-hook-gfe-amd是一款适用于GFE项目的fis3前端构建工具插件，提供了AMD定义和依赖分析解决方案，可用于优化js打包和加载。本篇文章将提供详细的使用教程和示例代码，帮助你快速上手。
安装
使用npm安装fis3-hook-gfe-amd：
npm install fis3-hook-gfe-amd --save-dev
配置
在fis-config.js中添加以下代码：
-- -------------------- ---- ------- --------------- - ------ --- ------------- ----- --- ------ ------------------------------ --------------- ------------------- ------ ---------------- ------------------ ------------- ------------- --------- ------------------------ ------------- ------------ ------- ---------- -------- ----------------------- ---------- ---
常用配置项
paths
设置前端模块化查找路径别名，可以用来方便地指定模块的路径。若路径有多个，可以按数组规则设置。
fis.hook('amd', {
paths: {
'jquery':'./lib/jquery.js',
'underscore': ['./lib/underscore.js', './lib/lodash.compat.min.js']
}
});shim
模块补丁，将不符合AMD规范的JS文件包装成 AMD规范的函数。示例代码如下：
fis.hook('amd', {
shim: {
'jquery-ui': {
deps: ['jquery'],
exports: 'jQuery.fn.sortable'
}
}
});ignore
配置不需要进行依赖分析的文件或者文件夹，支持 glob 语法。
fis.hook('amd', {
ignore: ['**/some-module.js', /^\/modules\/view\//i]
});baseUrl
指定模块的基础路径，所有的 module id 都相对于此路径。默认值是 .。
fis.hook('amd', {
baseUrl: '/static/js'
});forwardDeclaration
开启静态资源Loader支持 require('xxx.css', 'insertCss');。
fis.hook('amd', {
forwardDeclaration: true
});globalAsyncAsSync
异步模块当同步模块引入，设置为true，异步模块里面的资源只有在被同步引用的时候才会被加载并且执行。
fis.hook('amd', {
globalAsyncAsSync: true
});packages
模块包配置，如果一个模块id 没有在 paths 中配置，而是符合 'packageName:moduleId' 规则，则按照配置的方式去查找模块路径。
-- -------------------- ---- -------
--------------- -
--------- -
-
----- ----------
--------- ------------------ -- ------- ---
----- ------- -- ---- -------- --
-
-
---config
模块通用配置，可以配置一个通用的模块信息。下面示例定义一个全局的依赖配置。
fis.hook('amd', {
config: {
'gallery/dialog': {
deps: ['jquery']
}
}
});skipBuiltinModules
忽略内置模块分析。
fis.hook('amd', {
skipBuiltinModules: true
});示例代码
-- -------------------- ---- -------
---- ------ ---
------- --------------------------------------
--------
------------------- -------- --- -
------------------- ---------- -------------
---
---------
---- ----------- ---
--------------- -
------ -
--------------------------
-
---结尾
本篇文章针对的是使用 fis3 构建工具的前端开发者，如果你的公司或项目也在使用 amd 规范或者 requireJS 框架，那么就可以考虑使用 fis3-hook-gfe-amd 插件，优化你的项目构建效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2ba