steamer-webpack-utils
steamer 脚手架 webpack utils 函数
接口函数
项目目录示例
src |-- page |___| | |-- index | | |-- mainjs | | |-- indexhtml | | | |-- comment | | |-- mainjs | | |-- indexhtml | | | |-- detail | |-- mainjsx | |-- indexhtml | |-- index1html | |-- img | |-- sprites | |- button | |- icon | | |-- indexhtml |-- commenthtml |-- detailhtml |-- mainjs
若你想查看具体接口参数,请参阅 index.js
-
fs 具备 fs-extra 的能力
-
getHtmlEntry
- 自动获取
html
文件 - 参数
{Object}
option.srcPath
{String}
包含有html
文件的目录option.level
{Integer}
0 表示在当前目录寻找,1 表示在下一级目录寻找options.keyType
{String}
返回key
值的类型, 默认folderName
(用父文件夹名作key
), 其它值fileName
(用文件名作为key
)
- 自动获取
var htmlFiles = ; // 返回 key: 'comment' path: 'path/src/comment.html' key: 'detail' path: 'path/src/detail.html' key: 'index' path: 'path/src/index.html' var htmlFiles = ; // 返回 key: 'comment' path: 'path/src/page/comment/index.html' key: 'detail' path: 'path/src/page/detail/index.html' key: 'index' path: 'path/src/page/index/index.html' var htmlFiles = ;// 返回 key: 'index' path: 'path/src/page/comment/index.html' key: 'index' path: 'path/src/page/detail/index.html' key: 'index1' path: 'path/src/page/detail/index1.html' key: 'index' path: 'path/src/page/index/index.html'
- filterHtmlFile
- 筛选
html
文件, 通常与getHtmlEntry
一起使用 - 参数
htmlFiles
,{Array}
, 所有html
文件selectedFiles
,{Array}
, 选中的html
文件, 支持glob
- 筛选
var htmlFiles = ; // 最终返回 key: 'detail' path: 'path/src/page/detail/index.html' key: 'detail-m' path: 'path/src/page/detail-m/index.html' // 如果第二个参数被忽略,则完整返回var htmlFiles = ; // 它返回原有的数组 key: 'comment' path: 'path/src/page/comment/index.html' key: 'detail' path: 'path/src/page/detail/index.html' key: 'index' path: 'path/src/page/index/index.html'
- filterHtmlFileByCmd
- 根据 npm 命令进行 html 文件的筛选
- 参数
- htmlFiles, {Array}, 所有
html
文件, 支持glob
- htmlFiles, {Array}, 所有
// 如果你使用以下命令启动你的脚本,npm run start -- --entry=detail*var htmlFiles = key: 'comment' path: 'path/src/page/comment/index.html' key: 'detail' path: 'path/src/page/detail/index.html' key: 'detail-m' path: 'path/src/page/detail-m/index.html' key: 'index' path: 'path/src/page/index/index.html' ; utils; // 返回值如下 key: 'detail' path: 'path/src/page/detail/index.html' key: 'detail-m' path: 'path/src/page/detail-m/index.html'
- getSpriteEntry
- 自动获取合图文件
- 参数,
{Object}
options.srcPath
,{String}
, 源文件目录
var spriteFolders = ; // 返回 key: 'btn' path: 'path/src/img/sprites/btn' key: 'list' path: 'path/src/img/sprites/list'
- getJsEntry
- 自动获取
js
文件 - 参数,
{Object}
option.srcPath
, {String}, 包含js
文件的目录option.fileName
, {String}, 主入口文件,默认main
option.extensions
, {Array}, 主入口文件可能的后缀,默认["js"]
option.keyPrefix
, {String}, 返回对象key
的前缀option.level
, {Integer}, 0 表示在当前目录寻找,1 表示在下一级目录寻找
var jsFiles utils; // 返回 main: 'path/src/main.js') var jsFiles = utils; // 返回 'js/comment': 'path/src/page/comment/index.js' 'js/detail': 'path/src/page/detail/index.js' 'js/index': 'path/src/page/index/index.js'
- filterJsFile
- 筛选 js 文件, 通常搭配
getJsEntry
或者getJsFile
使用 - 参数
- jsFiles, {Object}, 所有
js
文件 - selectedFiles, {Array}, 选中的
js
文件, 支持glob
- jsFiles, {Object}, 所有
- 筛选 js 文件, 通常搭配
utils; // 最后返回如下 'js/detail': 'path/src/page/detail/index.js' 'js/detail-m': 'path/src/page/detail-m/index.js' // 如果 selectedFiles 参数被忽略,则完整返回
- filterJsFileByCmd
- 根据 npm 命令进行 js 文件的筛选
- 参数
- jsFiles, {Object}, 所有
js
文件, 支持glob
- jsFiles, {Object}, 所有
// 如果你使用以下命令启动你的脚本,npm run start -- --entry=js/detail* var jsFiles = 'js/comment': 'path/src/page/comment/index.js' 'js/detail': 'path/src/page/detail/index.js' 'js/detail-m': 'path/src/page/detail-m/index.js' 'js/index': 'path/src/page/index/index.js' ; jsFiles = utils; // 返回值为 'js/detail': 'path/src/page/detail/index.js' 'js/detail-m': 'path/src/page/detail-m/index.js'
- walkAndReplace
- 给目录内文件内容进行替换
- 参数
- folder, {String}, 目录路径
- extensions, {Array}, 需要替换的文件后缀,如为空数组,则所有文件都要替换
- replaceObj, {Object}, 需要替换的标签内容
// 内容标签格式一律为 <% key %>, 以下内容是将目录内所有 js 和 html 文件中的 <% title %> 标签内容替换为 index utils;
- copyTemplate
- 将模板拷贝到指定位置
- 参数
- srcFolder, {String}, 源目录
- destFolder, {String}, 目标目录
utils;
- addPlugins
- 给
webpack
配置添加 插件
- 给
;
-
getArgvs
- 获取命令行参数
- 参数
argvs
,{Object}
, 具体参数,可留空,若留空,则自动返回process.argv
被处理的参数
-
getNpmArgvs
- 获取npm命令行参数
// 如 npm start -- --entry=index var npmArgvs = ; // npmArgvs.entry 值为 "index"
-
error
- 报错信息
- 参数
- msg, {String}, 报错文本
-
info
- 正常信息
- 参数
- msg, {String}, 正常文本
-
warn
- 警告信息
- 参数
- msg, {String}, 警告文本
-
success
- 成功信息
- 参数
- msg, {String}, 成功文本
-
getHtmlFile
- 自动获取
html
文件,此api
即将被弃用,请改用getHtmlEntry
- 自动获取
var htmlFiles = ; // it returns"index" "comment" "detail"
- getJsFile
- 自动获取
js
文件,此api
即将被弃用,请改用getJsEntry
- 自动获取
var jsFiles = ; // 返回 'js/index': 'xxx/project/src/page/index/main.js' 'js/comment': 'xxx/project/src/page/comment/main.js' 'js/detail': 'xxx/project/src/page/index/main.jsx'
- getSpriteFolder
- 获取合图文件,此
api
即将被弃用,请改用getSpriteEntry
- 获取合图文件,此
var spriteFolders = ; // 返回'button' 'icon'