kn-cli

项目脚手架

快速开始

0. node使用16.18.0
1. 安装: npm i kn-cli -g
2. 创建项目: kn-cli --create
3. 调试项目: sh dev.sh

• 当export dev_mode=watch时，将不会独立启动http服务，而是直接将编译后资源输出到文件夹内并监听源代码的变化后重新编译

4. 编译项目: sh build.sh或sh frontend_build.sh
5. 当项目中需要添加第三方npm包时，务必使用--save参数npm i 包名 --save
6. 包模块分析:sh report.sh

项目创建后，记得执行sh init.sh 以激活git分支提交日志

Windows环境

推荐windows下使用gitbash终端 在使用kn-cli --create时，请改为接住winpty来执行，如winpty kn-cli.cmd --create
这是由于minTTY使用的gitbash无法处理我们创建项目时选择列表的问题，导致用户无法用上下来选择项目 , 同样在项目模板启动的时候如sh dev.sh需要改为winpty sh dev.sh

cli 其它常用方法

1. 查看版本号： kn-cli -v
2. 创建辅助工具：kn-cli --tool
   目前辅助工具有：图片压缩、word转html、iconfont、资源引用检查、docker容器内运行

cli.config.js - 构建配置文件

module.exports = {
  projectName:'项目名称',
  registryType:'npm',//默认:npm npm镜像源,taobao|npm
  less:{
    javascriptEnabled:false,//默认:false, 是否开启less中对js支持
  },
  
  entry:{ //默认:{index:[path.resolve(dirname, 'src/index')]} 自定义多页面入口
    'home/index': 'src/jsx/home/index.jsx',
  },
  copyFolder:['static','pluginjs'],//默认:[],完整复制的文件夹,除了static和pluginjs外其它需要被完整复制的文件夹
  // copyFolder:[{from:'static',to:'folder/static'}],//支持目录自定义配置
  hashMode:false,//默认:true,false=关闭编译后的文件使用hash模式使用原始文件名
  cssModule:'global',//默认:local, css引用默认的模式,global/local/(path)=>global/local
    // cssModule: (resourcePath) => {
    //   // antd.less编译的时候使用global模式,注意这里针对在项目目录下在jsx内通过import引入的less
    //   if (/antd.less$/i.test(resourcePath)) {
    //     return 'global'
    //   }
    //   return "local";
    // },
  jsSplitMode:false,//默认:true,false=关闭js的模块切割
  // jsSplitMode:{
  //   runtime:false,//不单独生成runtime
  // }
  cssSplitMode:false,//默认:true,false=关闭css文件分隔，将css内置到js内
  sass:true,//默认:false,true=开启sass支持,默认仅支持less
  indexHtml:false,//默认:true,false=关闭index.html的注入
  // indexHtml:{
  //   injext:true,//是否自动注入
  //   minify:true,//是否压缩html
  //   template:'index_template.html',
  //   output:'../index.html',//将index.html输出到 dist目录外的index.html
  // },
  projectSourceFolder:'./',//默认:'./public',项目源代码文件夹所在位置，默认是'src'
  site_root_path:'',//默认:'',站点根目录，
  // dist:'dist',// 默认:'dist',编译后文件输出目录
  // dist:{// 可详细配置相应资源的输出目录
  //   base:'',
  //   js:'',//js输出的目录
  // }
  // pxtorem:false,//默认:true,开启px转rem模式
  // https:true,//是否使用https本地调试
  // rules:{
  //   compileNpmPackage:['kn-hooks'],//需要参与编译的npm包
  // },
  // devServer:{
  //   host:'0.0.0.0',//指定调试地址IP
  //   port:8080,
  //   useLocalIp:false,//是否使用本地IP地址代替localhost
  //   historyApiFallback:true,//打开本地支持history模式，注意配合site_root_path:'/'  类使用
  // }
  // sourcemap:{
  //   local:true //将生产环境的sourcemap部署到生产本地
  // }
};

环境变量

build_env
可选值:localdebug|dev|prod
控制构建模式，localdebug本地调试、dev测试环境、prod生产

build_log_level 可选值：clear|all 控制输出的日志类型，如果不手动接入的话，prod模式下为简洁模式，开发模式下为全量输出

noSkipNpmInstall
可选值:1|0
默认值：1
是否跳过npm install以增加启动速度，prod模式下必然为1，其它模式下根据用户选择

mock 可选值:1|0
默认值：0
是否打开mock

registryType
可选值：taobao|zheda|huawei|空值
默认值：空值
npm镜像源

dev_mode
可选值：watch|空值
默认值：空值
调试模式是用的watch文件监听，还是webpack-dev-server监听模式

report
可选值：1|空值
是否为report调试模式

常见问题

• 调试模式下，localhost可以访问,本地ip访问不了？ 修改cli.config.js将devServer的host设置为0.0.0.0

  devServer:{host:'0.0.0.0'}

• 编译时遇到报错

  • npm ERR! ERROR: Failed to download Chromium r686378! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
    在dev.sh和frontend_build.sh内增加 export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true解决

更新日志

• 1.0.124 支持vite6调试模式，由于@vitejs/plugin-react目前稳定版本只有4.3.4还不完全支持vite7，所以暂时使用vite6

• 1.0.120 支持??=语法编译

• 1.0.97 将Postcss版本锁定在8

• 1.0.96
  修正工程package.json内devDependencies部分内容没有被同步的问题

• 1.0.92
  所有模版文件夹首字母大写问题修正

• 1.0.91
  创建项目时自动将项目名称设置为当前文件夹的名称
  模版内doc注释规范化、文件夹首字母大写更正

• 1.0.90
  优化在hashMode=false的情况下，html内引用js、css资源时在尾部增加v=版本号

• 1.0.89
  cli在npm i时，默认增加 export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 解决puppeteer包安装引起的异常

• 1.0.85
  cli工具内增加docker环境工具，用于将当前项目直接在docker内运行

• 1.0.82
  增加环境变量：build_log_level ，用于控制输出的日志类型

• 1.0.77
  构建shell优化

• 1.0.76
  cli工具内增加资源引用检查工具，用来检查是否有大小写不匹配的资源引用

• 1.0.75
  工程模版内jsconfig.json格式纠正

• 1.0.74
  工程模版内增加vscode基础配置

• 1.0.73
  修改 start.sh内 if[ "dev_mode"x == "watch"x ] --> if [ "${dev_mode}" = "watch" ] 以兼容系统

• 1.0.72 增加devServer:{historyApiFallback:true}设置，支持本地调试的history模式

• 1.0.71 增加运行日志中，每个任务的消耗时间

• 1.0.70
  cli.config增加sourcemap{local:true}的可选配置，用来将sourcemap部署到生产本地

• 1.0.69
  默认生产环境不输出sourcemap

• 1.0.68

  1. 更新readme
  2. 增加kn-cli --tool功能，用来创建需要的辅助工具

• 1.0.67
  变更各模板内的tinypng工具,从super-tinypng改为super-tinypng-pro

• 1.0.66
  各模板内mock/index.js内的错误代码修正

• 1.0.65
  增加OA管理系统jwt授权的模板

• 1.0.64
  oa模板的readme更新

• 1.0.61
  兼容windows下终端的编译

• 1.0.57
  增加cli.config.js内devServer配置

• 1.0.56
  OA模板更新

• 1.0.54
  增加OA模板

• 1.0.53 给所有模板项目下增加版本里程碑TAG标记

• 1.0.51
  项目发布的流程优化

• 1.0.50
  增加官网模板

• 1.0.49
  更新app和admin模板，主要是编写了使用案例

• 1.0.48

  1. cli.config增加rules:{compileNpmPackage:[]}配置，用于配置一些需要参与编译的npm包
  2. 更新app及后管项目的模板

• 1.0.47
  后管模板工程对菜单路由的隐藏子路由控制方法

• 1.0.46
  模板工程下增加jsconfig.json用于解决配置资源根目录别名后vscode无法快捷定位文件

• 1.0.45
  后管模板创建不了的问题

• 1.0.44 更新后管模板

• 1.0.43
  增加pc后管模板

• 1.0.42
  cli.config.js增加version字段，用来标识应用版本号

• 1.0.41
  cli.config.js内增加https的调试模式

• 1.0.40
  MiniCssExtractPlugin增加忽略引用顺序的警告
  移动端模板将ant-mobile版本变更为5.28.0

• 1.0.39
  两个MiniCssExtractPlugin插件引起的sourcemap异常

• 1.0.38
  编译环境被强制变为localdebug的问题

• 1.0.37
  去掉cross_env

• 1.0.36
  优化shell脚本

• 1.0.35
  soucemap异常bug

• 1.0.34
  修改模板中环境变量的设定方式，改为export方式

• 1.0.33
  增加indexHtml配置

• 1.0.32
  减小包值

• 1.0.31 更新app模板

• 1.0.30

• 1.0.29

  1. 修复因多entry情况下，生成runtime会导致入口js变为chunk的问题

• 1.0.28

  1. chunkFileName命名

• 1.0.27

  1. 更新模板

• 1.0.26

  1. 删除 kn-cli -v 输出的多余文字

• 1.0.25

  1. 修复非hashMode编译情况下，对于异步加载的chunk文件，添加了时间戳进行防缓存处理

• 1.0.24

  1. 删除了无用的console.log

• 1.0.23

  1. 修正postcss.config无法正确读取的bug
  2. 增加对pxtorem插件的开关配置
  3. 增加构建日志文件
  4. 增加 cli.config.js内增加name名称配置

• 1.0.22

  1. cli.config.js 扩展indexHtml的配置项，详细参考注释

• 1.0.21

  1. cli.config.js内扩展了copyFolder配置项目的功能，现在支持更多配置，详细参考注释

• 1.0.20

  1. cli.config.js增加配置site_root_path，用于设置站点根目录

• 1.0.19

  1. 对splitChunks内runtime的cli配置支持

• 1.0.18

  1. cli.config.js增加配置项，具体可以参考cli.config.js内的注释
  2. 在调试模式中增加-watch模式，以便一些前后端不分离的项目进行调试

• 1.0.17

  1. 调整node_modules搜索顺序

• 1.0.16

  1. 调整node_modules搜索顺序

• 1.0.15

  1. 增加cli.config.js配置文件，主要配置npm的镜像源、less配置javascriptEnabled相关开关

• 1.0.14

  1. 对打包过程优化，判断node_modules是否存在及清理必要
  2. 在打包前输出cli版本号

• 1.0.13

  1. 对打包时resolve.modules寻找node_modules的路径优先级进行调整

• 1.0.12

  1. 去除 webpack-visualizer-plugin
  2. 对打包时resolve.modules寻找node_modules的路径优先级进行调整
  3. 对打包、调试过程中控制台的输出优化，避免无效信息

• 1.0.11

  1. 增加 kn-cli --report对包的模块化进行报告输出
  2. 对 statics和pluginjs文件夹不存在或内部没有文件的情况下会编译报错进行了修复，现在不会再导致编译失败了

• 1.0.9

  1. 移动端模板内增加build.sh用于测试环境打包用
  2. 移动端模板内pluginjs文件夹内放一个空的文件，因为在打包时webpack会复制pluginjs和statics内的内容，如果内容为空容易引起报错

• 1.0.8

  1. 关闭编译过程中--progress参数
  2. build时如果build_env不存在才强行设置为prod

• 1.0.7

  1. 解决对antd-mobile的Tabs组件当前tab下划线焦点无法跟随的问题

• 1.0.6

  1. APP模板增加dev.sh用于快速直接启动调试
  2. APP模板readme变更

• 1.0.5
  正式版本第一版