{"id":16441622,"url":"https://github.com/wibetter/akfun","last_synced_at":"2025-04-06T07:09:58.150Z","repository":{"id":49498564,"uuid":"287278827","full_name":"wibetter/akfun","owner":"wibetter","description":"前端脚手架：支持Vue技术栈和react技术栈","archived":false,"fork":false,"pushed_at":"2024-11-21T14:19:37.000Z","size":452,"stargazers_count":52,"open_issues_count":3,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T06:09:43.152Z","etag":null,"topics":["cli","react","rollup","vue","webpack5"],"latest_commit_sha":null,"homepage":"","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/wibetter.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-13T12:51:19.000Z","updated_at":"2024-12-19T01:57:13.000Z","dependencies_parsed_at":"2024-06-19T00:01:21.752Z","dependency_job_id":"8d700e4c-4dbb-4085-8258-6fe88c8cf46c","html_url":"https://github.com/wibetter/akfun","commit_stats":{"total_commits":159,"total_committers":4,"mean_commits":39.75,"dds":"0.44654088050314467","last_synced_commit":"ff39d75c3883440e9b856dd808853680b2e81395"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wibetter%2Fakfun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wibetter%2Fakfun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wibetter%2Fakfun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wibetter%2Fakfun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wibetter","download_url":"https://codeload.github.com/wibetter/akfun/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445667,"owners_count":20939958,"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":["cli","react","rollup","vue","webpack5"],"created_at":"2024-10-11T09:14:56.387Z","updated_at":"2025-04-06T07:09:58.107Z","avatar_url":"https://github.com/wibetter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AKFun 前端脚手架\n\u003e AKFun 是一个基于 Webpack 和 rollup 的前端多场景打包工具，支持多种技术栈：Vue技术栈、React技术栈、React\u0026TS技术栈\n- 核心理念：提供完整\u0026全面的前端工程能力，并尽可能屏蔽掉前端工程相关配置，让开发者更专注业务研发工作。\n- 技术栈：node/webpack/rollup/babel/eslint/stylelint\n\n## 特性\n- ⚡️ 零配置，开箱即用\n- 👏 支持Vue和React项目的调试和构建\n- 支持单页面和多页面\n- 提供三种构建场景: 本地开发模式(包含热更新、接口代理等功能)、生产环境代码构建、library库构建(支持umd和esm的打包能力)\n- 开放配置能力: 可配置构建入口文件、开启ESLint代码检测、接口代理等\n- 支持 [Autoprefixer](https://github.com/postcss/autoprefixer#readme)、[Sass](https://sass-lang.com/)、[PostCSS](https://postcss.org/)、[ESLint](http://eslint.cn/)、[StyleLint](https://stylelint.io/)\n- 支持项目系统参数自动批量替换 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader)\n- 提供完整的Vue和React项目模板\n\n## 快速开始 / 使用方法一\n\u003e 全局安装AKFun，用于同时管理多个前端项目代码（可使用AKFun创建一个新项目）\n\n1. **全局安装**\n```bash\n$ yarn global add akfun 或者  npm i -g akfun\n```\n\n2. **初始化一个项目**\n\u003e 可选择项目类型：vue或者react，默认react类型的项目，也可通过--dir参数指定存放项目模板的目录\n```bash\n$ akfun init -t=vue\n```\n\n3. **开始使用：以全局命令方式构建项目（确保已yarn install或者npm install）**\n\n```bash\n# 1、开启本地调试模式\n$ akfun dev\n```\n\n```bash\n# 2、构建生产环境代码\n$ akfun build\n```\n\n```bash\n# 3、构建第三方功能包（以umd格式输出）\n$ akfun build2lib\n```\n\n```bash\n# 4、构建第三方功能包的esm输出格式\n$ akfun build2esm\n```\n\n## 快速开始 / 使用方法二\n\u003e 在现有项目中局部安装AKFun，给现有项目赋予AKFun的前端工程能力\n\n1. **本地安装**\n\n```bash\n$ yarn add akfun --dev 或者 npm i akfun --save-dev\n```\n\n2. **在package.json中创建可执行脚本**\n\u003e 打开package.json，在scripts中新增三条可执行命令\n\n```bash\n# 用于开启本地调试模式\n\"dev\": \"akfun dev\"\n\n# 用于构建生产环境代码\n\"build\": \"akfun build\"\n\n# 用于构建第三方功能包（以umd格式输出）\n\"build2lib\": \"akfun build2lib\"\n\n# 用于构建第三方功能包（以esm格式输出）\n\"build2esm\": \"akfun build2esm\"\n```\n\n3. **创建AKFun的配置文件**\n\u003e 需要根据实际情况调整配置文件内（比如：入口文件、路径缩写、接口代理等）\n\n    ```bash\n    $ akfun config init\n    ```\n\n4. **开始构建当前项目**\n\n   4.1 开启本地调试模式\n    ```bash\n    $ npm run dev\n    ```\n   4.2 构建生产环境代码\n   ```bash\n   $ npm run build\n   ```\n   4.3 构建第三方功能包（以umd格式输出）\n   ```bash\n   $ npm run build2lib\n   ```\n   4.4 构建第三方功能包（以esm格式输出）\n   ```bash\n   $ npm run build2esm\n   ```\n\n## AKFun使用说明\n\n1. **使用AKFun新建一个新项目**\n\n    1.1 创建一个react项目\n    ```bash\n    $ akfun init\n    ```\n    1.2 创建一个vue类型项目\n    ```bash\n    $ akfun init -t=vue\n    ```\n    1.3 在指定的目录中创建一个新项目\n    ```bash\n    $ akfun init -t=vue --dir=myTest1\n    ```\n\n2. **创建AKFun的配置文件**\n    ```bash\n    $ akfun config init\n    ```\n\n3. **关于AKFun提供三种构建场景**\n    1. **dev**: 本地开发调试模式，用于本地开发和调试项目(包含热更新、接口代理等功能)，编译的代码没有压缩，默认会开启ESLint检测代码规范（可关闭）\n    2. **build**: 用于构建生产环境代码，编译输出的代码会进行压缩优化\n    3. **build2lib**: 用于构建library库，以umd进行输出\n    4. **build2esm**: 用于构建library库，以esm进行输出\n\n4. **关于AKFun的配置文件**\n    1. AKFun会提供全量的默认配置，实现零配置、开箱即用的能力\n    2. 自定义构建配置，请在当前项目根目录创建AKFun配置文件（akfun.config.js），AKFun提供初始化配置文件的方法：\n    ```bash\n    $ akfun config init\n    ```\n    3. akfun.config.js为当前项目的配置文件，优先级最高（可覆盖AKFun提供的默认配置）\n\n5. **配置构建入口文件（webpack.entry）**\n    1. 默认的构建入口文件: ./src/index.js\n    2. 自定义构建入口(akfun.config.js中提供对应的配置入口)\n        1. 在webpack.entry配置构建入口，dev\\build\\build2lib都会以此为构建入口 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))\n        2. 在dev.entry、build.entry、build2lib.entry中配置对应执行环境的构建入口，优先级高于webpack.entry\n\n6. **关于多页面**\n    1. 当akfun.config.js的entry只有一个入口配置，且对应的构建入口文件不存在时，AKFun会自动从src/pages中获取构建入口（支持多页面多模板）\n    2. 多页面模式下，会自动将src/pages中以.ts、.tsx、.js、.jsx结尾（对应的匹配正则：/\\.[tj]sx?$/）的文件作为构建入口文件，同时将同名的html文件作为当前页面模板\n\n7. **关于多页面多模板**\n    1. 只有dev和build的构建过程中才会使用到页面模板，build2lib构建中不会将打包完成的代码输出到页面模板中\n    2. 默认使用./src/index.html作为页面模板\n    3. 当项目中./src/index.html不存在时，会使用AKFun的提供的默认页面模板\n    4. 多页面模式时，如果pages下存在对应的html页面（与入口文件同名的html文件），会自动将其设置为页面模板\n\n## AKFun开放的配置能力\n\u003e AKFun配置文件（akfun.config.js），以下使用AKFunConfig代表akfun.config.js配置对象\n1. 开启/关闭 ESLint代码规范检测: AKFunConfig.settings.enableEslint (也可配置StyleLint的使用)\n```bash\nmodule.exports = {\n  settings: {\n    enableESLint: true, // 是否开启ESLint，默认开启ESLint检测代码格式\n    enableESLintFix: false, // 是否ESLint自动修正代码格式\n    enableStyleLint: true, // 是否开启StyleLint，默认开启ESLint检测代码格式\n    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式\n  },\n  ...\n}\n```\n2. 配置构建入口文件: 关于配置优先级请查看 AKFun使用说明 / 配置构建入口文件\n\u003e 以下是entry的配置位置，具体配置方法请查看Webpack官网 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))\n\u003e 备注：建议以key/value形式（object { \u003ckey\u003e: string | [string] }）配置entry\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    entry: {\n      index: './src/index.js',\n    }\n  },\n  ...\n  dev: {\n    entry: {}\n  }\n  build: {\n    entry: {}\n  }\n  build2lib: {\n    entry: {}\n  }\n  build2esm: {\n    input: resolve('src/main.js'),\n    fileName: 'index',\n  }\n  ...\n}\n```\n\n3. 解析(resolve) / extensions配置: 自动解析确定的扩展（配置可识别的文件后缀）\n\u003e 以下是extensions的配置位置，具体配置方法请查看Webpack官网 ([关于resolve-extensions的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-extensions))\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    resolve: {\n      extensions: ['.js', '.jsx', '.vue', 'json'],\n    }\n  },\n  ...\n}\n```\n\n4. 解析(resolve) / alias配置: 创建 import 或 require 的别名，来确保模块引入变得更简单\n\u003e 以下是alias的配置位置，具体配置方法请查看Webpack官网 ([关于resolve-alias的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias))\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    resolve: {\n      alias: {},\n    }\n  },\n  ...\n}\n```\n5. 页面模板路径配置：关于页面模板请查看 AKFun使用说明 / 关于页面模板\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    template: '',\n  }\n  ...\n}\n```\n\n6. 注入公共的SASS文件\n\u003e 为项目中每个.scss后缀的样式文件注入公共的SASS内容（变量、mixin、function等）\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    sassResources: [],\n  }\n  ...\n}\n```\n\n7. 打包忽略node_modules配置项: ignoreNodeModules（默认为false）\n\u003e 打包过程中，忽略node_modules中的依赖文件，不注入到bundle中，减少最后生成代码体积\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    ignoreNodeModules: true,\n    allowList: [], // 用于配置会注入bundle中的依赖包（ignoreNodeModules为true时生效）\n  }\n  ...\n}\n```\n\n8. 是否生成ts声明文件配置项: createDeclaration（默认为false）\n\u003e 构建ts项目中，可以选择是否生成ts声明文件\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    createDeclaration: true,\n  }\n  ...\n}\n```\n\n9. 配置项目源码目录（工程有效目录范围）: projectDir\n\u003e 构建项目中，设置生效的目录（可同时设置多个目录），用于提高前端工程执行效率。可以不配置，默认为['./src']\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    projectDir: ['./src'],\n  }\n  ...\n}\n```\n\n10. 项目源码环境变量批量替换\n\u003e [关于params-replace-loader的使用方法](https://www.npmjs.com/package/params-replace-loader)\n```bash\nmodule.exports = {\n  ...\n  envParams: {\n    common: { // 通用参数\n      '#version#': '20200810.1',\n    },\n    local: { // 本地开发环境\n      '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址\n      '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址\n      '#routeBasePath#': '/', // 路由根地址\n    },\n  }\n  ...\n}\n```\n\n11. 接口代理配置：目前只有dev本地开发调试模式下会启动\n\u003e [关于proxyTable的配置方法](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)\n```bash\nmodule.exports = {\n  ...\n  dev: {\n    proxyTable: {\n    },\n  }\n  ...\n}\n```\n\n12. 用于开启本地调试模式的相关配置信息\n```bash\nmodule.exports = {\n  ...\n    dev: {\n      NODE_ENV: 'development', // development 模式，不会启动UglifyJsPlugin服务\n      port: 80, // 启动server服务的端口\n      autoOpenBrowser: true, // 是否自动打开页面\n      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）\n      assetsSubDirectory: '', // 资源引用二级路径\n      hostname: 'localhost', // 自动打开的页面主机\n      proxyTable: { // 接口代理\n        '/apiTest': {\n          target: 'http://api-test.com.cn', // 不支持跨域的接口根地址\n          ws: true,\n          changeOrigin: true\n        }\n      },\n      cssSourceMap: false,\n    },\n  ...\n}\n```\n\n13. 用于构建生产环境代码的相关配置信息\n```bash\nmodule.exports = {\n  ...\n    build: {\n      NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务\n      assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径）\n      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）\n      assetsSubDirectory: '', // 资源引用二级路径\n      productionSourceMap: false, // 是否显示原始源代码\n      productionGzip: false, // 是否开启Gzip服务\n      productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀\n      bundleAnalyzerReport: false, // 开启打包分析功能\n    }\n  ...\n}\n```\n\n14. 用于构建第三方功能包的配置（以umd格式输出）\n```bash\nmodule.exports = {\n  ...\n    build2lib: {\n      NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务\n      libraryName: '', // 构建第三方功能包时最后导出的引用变量名\n      assetsRoot: resolve('dist'), // 编译完成的文件存放路径\n      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）\n      assetsSubDirectory: '', // 资源引用二级路径\n      productionSourceMap: false, // 是否显示原始源代码\n      productionGzip: false, // 是否开启Gzip服务\n      productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀\n      bundleAnalyzerReport: false, // 开启打包分析功能\n    },\n  ...\n}\n```\n\n15. 用于构建esm格式的第三方功能包配置\n```bash\nmodule.exports = {\n  ...\n    build2esm: {\n      input: resolve('src/main.js'), // 入口文件\n      fileName: 'index', // 输出的文件名称\n      svgDir: 'src/icons/**', // 用于设置当前项目的icon所在目录，避免被 @rollup/plugin-image 编译成base64格式\n    },\n  ...\n}\n```\n\n16. 自定义css-loader的配置\n\u003e 比如用于启用/禁用 @import 解析。\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    ...\n    cssLoaderOption: {\n      import: false, // 启用/禁用 @import 解析\n    }\n  }\n  ...\n}\n```\n\n17. 自定义postcss-loader的配置\n\u003e 比如用于添加 PostCSS 选项与插件。\n```bash\nmodule.exports = {\n  ...\n  webpack: {\n    ...\n    postCssLoaderOption: {\n      postcssOptions: {\n        plugins: [\n          require('postcss-pxtorem')({ // 用于将px自动转化为rem\n            rootValue: 16, // 1rem 等于 16px\n            propList: ['*'], // 所有属性都转换\n          }),\n        ],\n      }\n    }\n  }\n  ...\n}\n```\n\n18. 本地开启https服务\n\u003e 使用 https://localhost/index.html 访问当前项目。\n```bash\nmodule.exports = {\n  ...\n  dev: {\n    ...\n    https: true, // 默认不开启\n  }\n  ...\n}\n```\n备注：akfun使用自签名证书开启https服务，浏览器会提示安全性问题不能正常访问，需要进行如下设置，以 Chrome设置 为例：浏览器打开 Chrome://flags/#allow-insecure-localhost 后将其设置为Enabled。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwibetter%2Fakfun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwibetter%2Fakfun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwibetter%2Fakfun/lists"}