# akfun > 前端脚手架：支持Vue技术栈和react技术栈 Latest version **5.3.5** (published 2026-04-30) · MIT license · 0 weekly downloads ## Install ```sh npm install akfun pnpm add akfun yarn add akfun bun add akfun ``` Provides the command `akfun`. ## Health **Score 45/100 (D)** — status: active. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 5.3.5 | | Published | 2026-04-30 | | First published | 2020-08-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 16.0.0 | | Dependencies | 119 | | Unpacked size | 194.9 KB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 53 | | Author | wibetter | | Maintainers | wibetter | | Keywords | 前端工程, 前端脚手架, webpack, react项目脚手架, vue项目脚手架, lib库构建工具 | ## Links - npm: https://www.npmjs.com/package/akfun - Repository: http://git@github.com:wibetter/akfun - Issues: https://github.com/wibetter/akfun/issues - npm.io page: https://npm.io/package/akfun ## Dependencies (119) - [qs](https://npm.io/package/qs.md) ^6.14.2 - [del](https://npm.io/package/del.md) ^6.0.0 - [ora](https://npm.io/package/ora.md) ^4.0.4 - [glob](https://npm.io/package/glob.md) ^7.2.0 - [less](https://npm.io/package/less.md) ^4.1.3 - [open](https://npm.io/package/open.md) ^8.4.0 - [sass](https://npm.io/package/sass.md) ^1.94.2 - [chalk](https://npm.io/package/chalk.md) ^4.0.0 - [yargs](https://npm.io/package/yargs.md) ^17.7.2 - [eslint](https://npm.io/package/eslint.md) ^8.8.0 - [figlet](https://npm.io/package/figlet.md) ^1.5.2 - [rimraf](https://npm.io/package/rimraf.md) ^3.0.2 - [rollup](https://npm.io/package/rollup.md) ^4.59.0 - [semver](https://npm.io/package/semver.md) ^7.3.5 - [stylus](https://npm.io/package/stylus.md) ^0.57.0 - [ali-oss](https://npm.io/package/ali-oss.md) ^6.17.0 - [cssnano](https://npm.io/package/cssnano.md) ^5.0.16 - [express](https://npm.io/package/express.md) ^4.17.2 - [shelljs](https://npm.io/package/shelljs.md) ^0.8.5 - [webpack](https://npm.io/package/webpack.md) ^5.105.3 - [inquirer](https://npm.io/package/inquirer.md) ^13.3.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [git-clone](https://npm.io/package/git-clone.md) ^0.2.0 - [stylelint](https://npm.io/package/stylelint.md) ^14.3.0 - [ts-loader](https://npm.io/package/ts-loader.md) ^9.2.6 - [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.17.0 - [css-loader](https://npm.io/package/css-loader.md) ^6.6.0 - [portfinder](https://npm.io/package/portfinder.md) ^1.0.28 - [typescript](https://npm.io/package/typescript.md) ^4.5.5 - [url-loader](https://npm.io/package/url-loader.md) ^4.1.1 - [vue-loader](https://npm.io/package/vue-loader.md) ^15.11.1 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.0 - [file-loader](https://npm.io/package/file-loader.md) ^6.2.0 - [html-loader](https://npm.io/package/html-loader.md) ^3.1.0 - [less-loader](https://npm.io/package/less-loader.md) ^11.0.0 - [sass-loader](https://npm.io/package/sass-loader.md) ^12.4.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^5.1.4 - [@svgr/rollup](https://npm.io/package/@svgr/rollup.md) ^8.1.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.2 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.3 - [style-loader](https://npm.io/package/style-loader.md) ^3.3.1 - [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) ^6.2.1 - [stylus-loader](https://npm.io/package/stylus-loader.md) ^7.0.0 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.27.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.3.4 - [postcss-nested](https://npm.io/package/postcss-nested.md) ^5.0.6 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.10.1 - [@babel/register](https://npm.io/package/@babel/register.md) ^7.17.0 - [@baiducloud/sdk](https://npm.io/package/@baiducloud/sdk.md) ^1.0.7 - [ts-import-plugin](https://npm.io/package/ts-import-plugin.md) ^2.0.0 - [vue-style-loader](https://npm.io/package/vue-style-loader.md) ^4.1.3 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.11 - [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.29 - [eslint-plugin-vue](https://npm.io/package/eslint-plugin-vue.md) ^8.4.0 - [rollup-plugin-jsx](https://npm.io/package/rollup-plugin-jsx.md) ^1.0.3 - [rollup-plugin-vue](https://npm.io/package/rollup-plugin-vue.md) ^6.0.0 - [vue-eslint-parser](https://npm.io/package/vue-eslint-parser.md) ^8.2.0 - [eslint-plugin-html](https://npm.io/package/eslint-plugin-html.md) ^6.2.0 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^7.3.1 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.7 - [@rollup/plugin-json](https://npm.io/package/@rollup/plugin-json.md) ^6.1.0 - [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.3 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^13.0.1 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.28.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0 - [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) ^6.0.3 - [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) ^7.17.0 - [@rollup/plugin-alias](https://npm.io/package/@rollup/plugin-alias.md) ^5.1.1 - [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^6.1.0 - [@rollup/plugin-image](https://npm.io/package/@rollup/plugin-image.md) ^3.0.3 - [es6-promise-polyfill](https://npm.io/package/es6-promise-polyfill.md) ^1.2.0 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.25.4 - [eventsource-polyfill](https://npm.io/package/eventsource-polyfill.md) ^0.9.6 - [@rollup/plugin-terser](https://npm.io/package/@rollup/plugin-terser.md) ^0.4.4 - [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^3.1.1 - [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) ^2.0.2 - [params-replace-loader](https://npm.io/package/params-replace-loader.md) ^1.1.6 - [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.2 - [sass-resources-loader](https://npm.io/package/sass-resources-loader.md) ^2.2.4 - [string-replace-loader](https://npm.io/package/string-replace-loader.md) ^3.1.0 - [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.7.16 - [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^8.3.0 - [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^4.0.0 - [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^5.3.1 - [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.25.1 - [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^3.0.0 - [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^29.0.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.5.3 - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.5.0 - [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.16.7 - [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) ^3.1.1 - [@rollup/plugin-typescript](https://npm.io/package/@rollup/plugin-typescript.md) ^12.3.0 - [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^5.10.2 - [eslint-config-airbnb-base](https://npm.io/package/eslint-config-airbnb-base.md) ^15.0.0 - [eslint-friendly-formatter](https://npm.io/package/eslint-friendly-formatter.md) ^4.0.1 - [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^24.0.0 - [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^11.1.0 - [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^16.0.3 - [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^2.1.0 - [connect-history-api-fallback](https://npm.io/package/connect-history-api-fallback.md) ^2.0.0 - [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^7.0.4 - [rollup-plugin-node-externals](https://npm.io/package/rollup-plugin-node-externals.md) ^8.1.2 - [@vue/eslint-config-typescript](https://npm.io/package/@vue/eslint-config-typescript.md) ^10.0.0 - [eslint-import-resolver-webpack](https://npm.io/package/eslint-import-resolver-webpack.md) ^0.13.2 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.27.1 - [@babel/plugin-syntax-import-meta](https://npm.io/package/@babel/plugin-syntax-import-meta.md) ^7.10.4 - [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^5.10.2 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.17.0 - [@babel/plugin-proposal-json-strings](https://npm.io/package/@babel/plugin-proposal-json-strings.md) ^7.16.7 - [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3 - [@babel/plugin-proposal-function-sent](https://npm.io/package/@babel/plugin-proposal-function-sent.md) ^7.16.7 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.16.7 - [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) ^7.16.7 - [@babel/plugin-proposal-throw-expressions](https://npm.io/package/@babel/plugin-proposal-throw-expressions.md) ^7.16.7 - [@babel/plugin-transform-optional-chaining](https://npm.io/package/@babel/plugin-transform-optional-chaining.md) ^7.23.0 - [@mapbox/stylelint-processor-arbitrary-tags](https://npm.io/package/@mapbox/stylelint-processor-arbitrary-tags.md) ^0.4.0 - [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.16.7 - [@babel/plugin-transform-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-transform-nullish-coalescing-operator.md) ^7.23.0 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 5.3.5 (latest) — 2026-04-30 - 5.3.3 — 2026-03-31 - 5.3.2 — 2026-03-31 - 5.3.1 — 2026-03-31 - 5.3.0 — 2026-02-28 - 5.2.13 — 2026-01-08 - 5.2.12 — 2025-12-10 - 5.2.11 — 2025-12-09 - 5.2.10 — 2025-12-09 - 5.2.9 — 2025-12-09 - 5.2.8 — 2025-12-09 - 5.2.7 — 2025-12-09 - 5.2.6 — 2025-12-09 - 5.2.5 — 2025-11-28 - 5.2.3 — 2025-11-28 - … 162 more at https://npm.io/package/akfun/versions ## README # AKFun 前端脚手架 AKFun 是一个基于 Webpack 与 Rollup 的多场景前端打包工具，支持 Vue、React、React+TS 技术栈，致力于提供"零配置、开箱即用"的前端工程能力，让开发者专注于业务开发。 ## 在线使用手册 [https://wibetter.github.io/akfun/](https://wibetter.github.io/akfun/) 国内访问地址: [https://akfun-docs.netlify.app/](https://akfun-docs.netlify.app/)。 ## 目录 - [主要特性](#主要特性) - [安装](#安装) - [快速开始](#快速开始) - [命令说明](#命令说明) - [配置指南](#配置指南) - [配置文件说明](#配置文件说明) - [基础配置](#基础配置) - [开发配置](#开发配置) - [构建配置](#构建配置) - [高级配置](#高级配置) - [其他说明](#其他说明) --- ## 主要特性 - **零配置**: 内置默认配置（前端工程最佳实践），开箱可用 - **多技术体系支持**: 支持 Vue、React、React+TS 的调试与构建 - **多种构建类型**: 本地开发（含热更新/代理）、生产构建、库构建（UMD/ESM）、Node 模块构建 - **灵活可配**: 支持入口、别名、代理、公共样式注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置 - **样式与规范**: 集成 Autoprefixer、Sass、PostCSS、ESLint、StyleLint - **参数替换**: 支持基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 的环境变量批量替换 - **模板支持**: 提供完整的 Vue/React 项目模板 - **内置缓存机制**: 内置缓存机制，提升二次构建速度 --- ## 安装 ### 全局安装 ```bash yarn global add akfun # 或 npm i -g akfun ``` ### 项目内安装 ```bash yarn add akfun --dev # 或 npm i akfun --save-dev ``` --- ## 快速开始 ### 方式一：创建新项目 1. **创建项目**（可指定模板与目录） ```bash akfun init -t=vue # 指定目录 akfun init -t=vue --dir=myTest1 ``` 2. **安装依赖** ```bash cd myTest1 npm install # 或 yarn install ``` 3. **开始开发** ```bash akfun dev ``` ### 方式二：在现有项目中使用 1. **安装依赖**（见上方安装说明） 2. **初始化配置文件** ```bash akfun config init ``` 3. **在 package.json 添加脚本** ```json { "scripts": { "dev": "akfun dev", "build": "akfun build", "build2lib": "akfun build2lib", "build2esm": "akfun build2esm" } } ``` 4. **运行命令** ```bash npm run dev npm run build ``` --- ## 命令说明 | 命令 | 说明 | |------|------| | `akfun init` | 交互式创建项目，支持 `-t`（模板类型）、`--dir`（目录名）参数 | | `akfun config init` | 在当前项目生成 `akfun.config.js` 配置文件 | | `akfun dev` | 启动本地开发服务器（含热更新、接口代理、可选 HTTPS、可选 ESLint/StyleLint） | | `akfun build` | 生产环境构建（压缩优化、可选分析） | | `akfun build2lib` | 构建 UMD 格式的库产物 | | `akfun build2esm` | 构建 ESM 格式的库产物 | | `akfun build2node` | 构建 Node 模块 | --- ## 配置指南 ### 配置文件说明 AKFun 默认提供完整配置，开箱即用。如需自定义配置，执行 `akfun config init` 生成 `akfun.config.js` 文件，然后按需修改。 配置文件采用 CommonJS 格式，导出一个配置对象： ```javascript module.exports = { // 配置项... } ``` --- ### 基础配置 #### 1. 代码规范检查 控制 ESLint 和 StyleLint 的启用与自动修复： ```javascript module.exports = { settings: { enableESLint: true, // 是否开启 ESLint，默认开启 enableESLintFix: false, // 是否 ESLint 自动修正代码格式 enableStyleLint: true, // 是否开启 StyleLint，默认开启 enableStyleLintFix: false // 是否 StyleLint 自动修正代码格式 } } ``` #### 2. 构建入口 配置构建入口文件，支持多入口。优先级：`dev/build/build2lib.entry` > `webpack.entry` > **提示**: 建议以 key/value（object `{ : string | [string] }`）配置 entry。详情参考 [Webpack 文档](https://www.webpackjs.com/configuration/entry-context/#entry) ```javascript module.exports = { webpack: { entry: { index: './src/index.js' } }, // 各场景可单独配置入口 dev: { entry: {} }, build: { entry: {} }, build2lib: { entry: {} }, build2esm: { input: resolve('src/main.js'), fileName: 'index' } } ``` #### 3. 文件解析配置 配置模块解析的文件扩展名： > 详情参考 [Webpack resolve.extensions 文档](https://www.webpackjs.com/configuration/resolve/#resolve-extensions) ```javascript module.exports = { webpack: { resolve: { extensions: ['.js', '.jsx', '.vue', '.json'] } } } ``` #### 4. 路径别名配置 配置模块路径别名，简化导入路径： > 详情参考 [Webpack resolve.alias 文档](https://www.webpackjs.com/configuration/resolve/#resolve-alias) ```javascript module.exports = { webpack: { resolve: { alias: { '@': resolve('src'), 'components': resolve('src/components') } } } } ``` #### 5. 页面模板与样式资源 ```javascript module.exports = { webpack: { template: '', // 自定义页面模板路径 sassResources: [ // 为每个 .scss 文件注入公共 SASS（变量、mixin、function 等） resolve('src/assets/css/mixin.scss'), resolve('src/assets/css/variables.scss') ] } } ``` #### 6. 依赖打包策略 控制是否忽略 `node_modules` 中的依赖，减少打包体积： ```javascript module.exports = { webpack: { ignoreNodeModules: true, // 是否忽略 node_modules 中的依赖文件 allowList: [ // 配置需要注入 bundle 的依赖包（ignoreNodeModules 为 true 时生效） 'lodash', 'axios' ] } } ``` #### 7. TypeScript 配置 ```javascript module.exports = { webpack: { createDeclaration: true, // 是否生成 TypeScript 声明文件 projectDir: ['./src'] // 可配置多个目录，用于提升工程执行效率 } } ``` #### 8. 环境变量替换 基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 实现环境变量批量替换： > 详情参考 [params-replace-loader 使用文档](https://www.npmjs.com/package/params-replace-loader) ```javascript module.exports = { envParams: { common: { // 通用参数 '#version#': '20200810.1' }, local: { // 本地开发环境 '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址 '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址 '#routeBasePath#': '/' // 路由根地址 } } } ``` --- ### 开发配置 #### 开发服务器配置 配置开发服务器的端口、代理、资源路径等： > 关于 proxyTable 的配置方法，参考 [Webpack DevServer Proxy 文档](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy) ```javascript module.exports = { dev: { NODE_ENV: 'development', // development 模式，不会启动 UglifyJsPlugin port: 80, // 启动 server 服务的端口 autoOpenBrowser: true, // 是否自动打开页面 assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） assetsSubDirectory: '', // 资源引用二级路径 hostname: 'localhost', // 自动打开的页面主机 proxyTable: { // 接口代理配置 '/apiTest': { target: 'http://api-test.com.cn', // 不支持跨域的接口根地址 ws: true, // 启用 WebSocket changeOrigin: true // 改变请求头中的 origin } }, cssSourceMap: false, // CSS Source Map https: false // 是否启用 HTTPS（见下方 HTTPS 配置说明） } } ``` #### 本地 HTTPS 启用本地 HTTPS 开发服务： > 使用 `https://localhost/index.html` 访问当前项目 ```javascript module.exports = { dev: { https: true // 默认不开启 } } ``` **注意事项**: akfun 使用自签名证书开启 HTTPS 服务，浏览器会提示安全性问题。需要进行如下设置： - **Chrome**: 浏览器打开 `chrome://flags/#allow-insecure-localhost` 后将其设置为 `Enabled` - **其他浏览器**: 类似设置允许本地不安全的 localhost 连接 --- ### 构建配置 #### 生产环境构建 配置生产构建的输出路径、资源路径、压缩优化等： ```javascript module.exports = { build: { NODE_ENV: 'production', // production 模式，会启动 UglifyJsPlugin assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径） assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） assetsSubDirectory: '', // 资源引用二级路径 productionSourceMap: false, // 是否生成 Source Map productionGzip: false, // 是否开启 Gzip 压缩 productionGzipExtensions: ['js', 'css', 'json'], // Gzip 识别的文件后缀 bundleAnalyzerReport: false // 是否开启打包分析功能 } } ``` #### 库构建（UMD） 构建 UMD 格式的库，适用于通过 `