{"id":21989040,"url":"https://github.com/imweb/fis3-packager-smart","last_synced_at":"2025-04-30T11:29:51.400Z","repository":{"id":57237246,"uuid":"43311590","full_name":"imweb/fis3-packager-smart","owner":"imweb","description":"fis3 智能打包","archived":false,"fork":false,"pushed_at":"2018-04-03T06:48:03.000Z","size":70,"stargazers_count":4,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T19:02:05.649Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-28T16:08:47.000Z","updated_at":"2018-04-03T06:48:05.000Z","dependencies_parsed_at":"2022-08-26T14:04:13.424Z","dependency_job_id":null,"html_url":"https://github.com/imweb/fis3-packager-smart","commit_stats":null,"previous_names":["jiangyuan/fis3-packager-smart"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imweb%2Ffis3-packager-smart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imweb%2Ffis3-packager-smart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imweb%2Ffis3-packager-smart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imweb%2Ffis3-packager-smart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imweb","download_url":"https://codeload.github.com/imweb/fis3-packager-smart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251017350,"owners_count":21523561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T19:27:30.476Z","updated_at":"2025-04-30T11:29:51.340Z","avatar_url":"https://github.com/imweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fis3-packager-smart\nfis3 require打包插件。\n\n### 安装\n```\nnpm i -g fis3-packager-smart\n```\n\n### 打包原理\n分析页面a.html的同步（requires）和异步依赖（asyncs），每个依赖的js文件，会再去分析自身的依赖关系，然后打成一个包。\n\n例如页面a.html中有以下脚本：\n```\nrequire.async(['zepto', 'common', 'a'], function($, tools, main){\n    main.init();\n});\n```\n最终会分析zepto的依赖，打成一个包，common和a类似。\n\n配置中有lib项配置，表示该库会单独打成一个包。\n\n### html中的引用\n基于上面的原理，html中引入主JS脚本时，推荐的方式是：\n+ 主JS也是一个模块，而不是自执行的脚本，对外导出init接口\n+ html中使用内联的方式require主JS脚本，然后调用init方法\n```\n// main.js\nmodule.exports = {init: function(){}};\n\n// index.html\n\u003cscript\u003e\nrequire(['main'], function(main) {\n    main.init();\n});\n\u003c/script\u003e\n```\n\n或者主JS自执行，但是在html中通过require引入\n```\n// main.js\ninit();\n// index.html\n\u003cscript\u003e\nrequire('main');\n\u003c/script\u003e\n// index.html中不要使用下面的方式引入脚本\n\u003cscript src='main.js'\u003e\u003c/script\u003e\n```\n\n### 配置\n```\nfis.match('::package', {\n    packager: fis.plugin('smart', {\n        // 脚本占位符\n        scriptPlaceHolder: '\u003c!--SCRIPT_PLACEHOLDER--\u003e',\n\n        // 样式占位符\n        stylePlaceHolder: '\u003c!--STYLE_PLACEHOLDER--\u003e',\n\n        // 资源占位符\n        resourcePlaceHolder: '\u003c!--RESOURCEMAP_PLACEHOLDER--\u003e',\n\n        output: 'pkg/${id}_min.js',\n        \n        // 不打包的模块\n        ignore: [], \n        \n        // 适合移动端场景\n        cssInline: false,\n        \n        // css是否打包成一个文件，适合单页面应用\n        cssAllInOne: false,\n        // 页面js是否打包成一个文件，参考loader\n        jsAllInOne: false,\n        // common css，业务自行处理打包，其他打成一个page包\n        commonCssGlob: /\\/?common\\//\n    })\n});\n```\n\n上面的配置都是默认的，使用者可以完全不用管。\n```\nfis.match('::package', {\n    packager: fis.plugin('smart', {\n    });\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimweb%2Ffis3-packager-smart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimweb%2Ffis3-packager-smart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimweb%2Ffis3-packager-smart/lists"}