前端脚手架:支持Vue技术栈和react技术栈
AKFun 是一个基于 Webpack 和 rollup 的前端多场景打包工具,支持多种技术栈:Vue技术栈、React技术栈、React&TS技术栈
全局安装AKFun,用于同时管理多个前端项目代码(可使用AKFun创建一个新项目)
$ yarn global add akfun 或者 npm i -g akfun
可选择项目类型:vue或者react,默认react类型的项目,也可通过--dir参数指定存放项目模板的目录
$ akfun init -t=vue
# 1、开启本地调试模式
$ akfun dev
# 2、构建生产环境代码
$ akfun build
# 3、构建第三方功能包(以umd格式输出)
$ akfun build2lib
# 4、构建第三方功能包的esm输出格式
$ akfun build2esm
在现有项目中局部安装AKFun,给现有项目赋予AKFun的前端工程能力
$ yarn add akfun --dev 或者 npm i akfun --save-dev
打开package.json,在scripts中新增三条可执行命令
# 用于开启本地调试模式
"dev": "akfun dev"
# 用于构建生产环境代码
"build": "akfun build"
# 用于构建第三方功能包(以umd格式输出)
"build2lib": "akfun build2lib"
# 用于构建第三方功能包(以esm格式输出)
"build2esm": "akfun build2esm"
需要根据实际情况调整配置文件内(比如:入口文件、路径缩写、接口代理等)
```bash
$ akfun config init
```
开始构建当前项目
4.1 开启本地调试模式
$ npm run dev
4.2 构建生产环境代码
$ npm run build
4.3 构建第三方功能包(以umd格式输出)
$ npm run build2lib
4.4 构建第三方功能包(以esm格式输出)
$ npm run build2esm
使用AKFun新建一个新项目
1.1 创建一个react项目
$ akfun init
1.2 创建一个vue类型项目
$ akfun init -t=vue
1.3 在指定的目录中创建一个新项目
$ akfun init -t=vue --dir=myTest1
创建AKFun的配置文件
$ akfun config init
关于AKFun提供三种构建场景
关于AKFun的配置文件
$ akfun config init
配置构建入口文件(webpack.entry)
关于多页面
关于多页面多模板
AKFun配置文件(akfun.config.js),以下使用AKFunConfig代表akfun.config.js配置对象
module.exports = {
settings: {
enableESLint: true, // 是否开启ESLint,默认开启ESLint检测代码格式
enableESLintFix: false, // 是否ESLint自动修正代码格式
enableStyleLint: true, // 是否开启StyleLint,默认开启ESLint检测代码格式
enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
},
...
}
以下是entry的配置位置,具体配置方法请查看Webpack官网 (关于entry的配置方法) 备注:建议以key/value形式(object {
: string | [string] })配置entry
module.exports = {
...
webpack: {
entry: {
index: './src/index.js',
}
},
...
dev: {
entry: {}
}
build: {
entry: {}
}
build2lib: {
entry: {}
}
build2esm: {
input: resolve('src/main.js'),
fileName: 'index',
}
...
}
以下是extensions的配置位置,具体配置方法请查看Webpack官网 (关于resolve-extensions的配置方法)
module.exports = {
...
webpack: {
resolve: {
extensions: ['.js', '.jsx', '.vue', 'json'],
}
},
...
}
以下是alias的配置位置,具体配置方法请查看Webpack官网 (关于resolve-alias的配置方法)
module.exports = {
...
webpack: {
resolve: {
alias: {},
}
},
...
}
module.exports = {
...
webpack: {
template: '',
}
...
}
为项目中每个.scss后缀的样式文件注入公共的SASS内容(变量、mixin、function等)
module.exports = {
...
webpack: {
sassResources: [],
}
...
}
打包过程中,忽略node_modules中的依赖文件,不注入到bundle中,减少最后生成代码体积
module.exports = {
...
webpack: {
ignoreNodeModules: true,
allowList: [], // 用于配置会注入bundle中的依赖包(ignoreNodeModules为true时生效)
}
...
}
构建ts项目中,可以选择是否生成ts声明文件
module.exports = {
...
webpack: {
createDeclaration: true,
}
...
}
构建项目中,设置生效的目录(可同时设置多个目录),用于提高前端工程执行效率。可以不配置,默认为['./src']
module.exports = {
...
webpack: {
projectDir: ['./src'],
}
...
}
module.exports = {
...
envParams: {
common: { // 通用参数
'#version#': '20200810.1',
},
local: { // 本地开发环境
'#dataApiBase#': 'http://localhost:1024', // 数据接口根地址
'#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址
'#routeBasePath#': '/', // 路由根地址
},
}
...
}
module.exports = {
...
dev: {
proxyTable: {
},
}
...
}
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,
changeOrigin: true
}
},
cssSourceMap: false,
},
...
}
module.exports = {
...
build: {
NODE_ENV: 'production', // production 模式,会启动UglifyJsPlugin服务
assetsRoot: resolve('./dist'), // 打包后的文件绝对路径(物理路径)
assetsPublicPath: '/', // 设置静态资源的引用路径(根域名+路径)
assetsSubDirectory: '', // 资源引用二级路径
productionSourceMap: false, // 是否显示原始源代码
productionGzip: false, // 是否开启Gzip服务
productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
bundleAnalyzerReport: false, // 开启打包分析功能
}
...
}
module.exports = {
...
build2lib: {
NODE_ENV: 'production', // production 模式,会启动UglifyJsPlugin服务
libraryName: '', // 构建第三方功能包时最后导出的引用变量名
assetsRoot: resolve('dist'), // 编译完成的文件存放路径
assetsPublicPath: '/', // 设置静态资源的引用路径(根域名+路径)
assetsSubDirectory: '', // 资源引用二级路径
productionSourceMap: false, // 是否显示原始源代码
productionGzip: false, // 是否开启Gzip服务
productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
bundleAnalyzerReport: false, // 开启打包分析功能
},
...
}
module.exports = {
...
build2esm: {
input: resolve('src/main.js'), // 入口文件
fileName: 'index', // 输出的文件名称
},
...
}
比如用于启用/禁用 @import 解析。
module.exports = {
...
webpack: {
...
cssLoaderOption: {
import: false, // 启用/禁用 @import 解析
}
}
...
}
比如用于添加 PostCSS 选项与插件。
module.exports = {
...
webpack: {
...
postCssLoaderOption: {
postcssOptions: {
plugins: [
require('postcss-pxtorem')({ // 用于将px自动转化为rem
rootValue: 16, // 1rem 等于 16px
propList: ['*'], // 所有属性都转换
}),
],
}
}
}
...
}
使用 https://localhost/index.html 访问当前项目。
module.exports = {
...
dev: {
...
https: true, // 默认不开启
}
...
}
备注:akfun使用自签名证书开启https服务,浏览器会提示安全性问题不能正常访问,需要进行如下设置,以 Chrome设置 为例:浏览器打开 Chrome://flags/#allow-insecure-localhost 后将其设置为Enabled。