❤
npm
Sign UpSign In

fkww

1.1.2 • Public • Published

@fk/cli

介绍

基于 webpack 4 构建的脚手架工具，用作 web 项目开发、构建、发布全流程控制

本地脚本映射

  1. git 仓库拉取代码
  2. 安装依赖包
$ npm install
or
$ yarn install
  1. npm link 映射脚本到全局
$ npm link

指令说明

→ fk
Usage: fk
  fk create
  fk dev
  fk prod -i -m [module] -e [env]
  fk oss -m [module] -e [env]

Params:

  create: 项目初始化

  dev:
    -m [module] 模块名称
    -i 是否打印详细信息

  umd:
    -m [module] 模块名称
    -i 是否打印详细信息

  prod:
    -m [module] 模块名称
    -i 是否打印详细信息
    -e [env] 环境变量，dev/sit/uat/prod/front

  oss:
    -m [module] 模块名称
    -e [env] 环境变量，dev/sit/uat/prod/front

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  create         项目初始化
  dev            开发环境构建
  prod           生产环境构建
  oss            OSS推送
  umd            公共组件构建
  help [cmd]     display help for [cmd]
  1. fk create: 项目模板初始化

拉取 template 目录下事先定义好的模板代码
模板目录结构如下
各个项目中有所异同，目录意义大致相同

├── src  # 主目录
│    ├── assets     # 资源目录
│    │    ├── styles    # 全局 css，包括公共 css 定义
│    │    ├── public     # 可选，全局公共文件，比如微信配置文件，robots.txt等
│    │    └── images    # 图片目录
│    ├── source     # 全局公共方法，api文件默认生成目录
│    ├── components     # 公共组件
│    ├── store       # 可选，公共状态管理，视业务情况定
│    ├── `app.ts`     # 业务入口
│    ├── `index.html`     # 业务页面入口
│    ├── `index.scss`     # 业务样式入口
│    │
│    └── pages    # 页面模块
│         ├──  `${block1}`     # 业务模块1
│         │      └── index.ts     # 业务模块1汇总路由
│         ├──  `${block2}`     # 业务模块2
│         │      └── index.ts     # 业务模块2汇总路由
│         └── `index.ts`       # 业务入口
│
├── node_modules    # dependencies
├── .gitignore      # 配置文件 git 忽略规则
├── README.md       # md 描述文件
├── tslint.json     # 配置文件 ts 语法校验规则
├── tsconfig.json   # 配置文件 ts 编译规则
├── `fk.json`    # 核心配置文件，构建相关配置
└── package.json    # package info
  1. 脚手架核心配置文件

构建开发环境、生产环境、oss 推送相关配置基础依赖信息
必须存放项目根目录下

  • fk.json or fk.config.js 
// 接口前缀
const apiPrefix = "https://api.sit.fk.com";
const amapPrefix = "https://restapi.amap.com";
const proxyMapping = {};
// 接口 uri 前缀
const uriPrefix = ["/admin", "/carrier", "/taxSaving"];
const getProxy = (prefix, uri) => ({
  target: prefix,
  changeOrigin: true,
  secure: false,
  pathRewrite: {
    [`^${uri}`]: prefix + uri,
  },
});
// 代理映射
uriPrefix.map(uri => (proxyMapping[uri] = getProxy(apiPrefix, uri)));
// amap 代理
proxyMapping["/amap/v3"] = {
  target: amapPrefix,
  changeOrigin: true,
  secure: false,
  pathRewrite: {
    [`^/amap/v3`]: amapPrefix + "/v3",
  },
};
module.exports = {
  name: "frontend-admin",
  port: 3003, // 开发环境监听端口
  analyzerPort: 8888, // 生产环境 打包结构监听端口，仅限本地查看
  host: "localhost", // 启动 host
  isNeedAntd: true, // 是否需要 antd
  themePath: "styles/antd.less", // antd 主题全局变量路径
  https: false, // 是否开启 https
  resolvePath: ".", // 项目解析路径 可使用 @
  target: "./", // 模块入口路径
  publicPath: "/", // 打包文件公共路径前缀
  buildPath: "./dist", // 构建产物路径
  copyPath: "./src/assets/public", // 公共文件转移路径
  proxy: proxyMapping, // api代理，开发环境生效
  umeng: {
    dev: "https://v1.cnzz.com/z_stat.php?id=1279797018&web_id=1279797018",
    sit: "https://v1.cnzz.com/z_stat.php?id=1279797018&web_id=1279797018",
    uat: "https://v1.cnzz.com/z_stat.php?id=1279797022&web_id=1279797022",
    prod: "https://s4.cnzz.com/z_stat.php?id=1279796960&web_id=1279796960"
  },    //设置友盟统计
};

  • name

    项目别名，用作标识和 oss 推送别名

  • port

    端口，默认4051,此端口上传文件支持跨域

  • analyzerPort

    生产构建 webpack 分析代码端口，此端口配置即打开此分析功能，构建会以此端口生成相应分析页面

  • host

    默认 localhost, 建议配置local.fkplus.com, 本地方便读写同域下 cookie 配置 local.fkplus.com需要在本地 hosts 加入127.0.0.1 local.fkplus.com

  • resolvePath

    基于 webpack resolve 功能，映射此文件后，代码中可使用@符号映射到该配置路径

  • target

    构建模块路径

  • publicPath

    构建静态资源路径前缀

  • buildPath

    构建目录，oss 推送目录

  • copyPath

    复制文件目录，比如微信校验文件，robots.txt 等文件

  • isNeedAntd

    项目中是否使用用 antd，开启则构建中会引入必要 loader

  • themePath

    antd 全局样式变量 less 路径

  • proxy

    api 本地代理

{
  "/admin": {
    "target": "http://127.0.0.1:8080/",
    "changeOrigin": true,
    "pathRewrite": {
      "^/admin": "http://127.0.0.1:8080/admin"
    }
  }
}
  1. fk dev: 开发环境构建，支持代码热更新、接口代理

依赖项目下核心配置文件：fk.config.js or fk.json

  • -m [module 名称]：扩展参数，目前所有项目中并未使用
  • -i: 打印详细构建日志
  1. fk umd: 制作 umd 模式公共包，用作 cdn 引用

依赖项目下核心配置文件：fk.config.js or fk.json

  • -m [module 名称]：扩展参数，目前所有项目中并未使用
  • -i: 打印详细构建日志
  1. fk prod: 生产包构建，压缩、合并、优化代码

依赖项目下核心配置文件：fk.config.js or fk.json

  • -m [module 名称]：扩展参数，目前所有项目中并未使用
  • -i: 打印详细构建日志
  • -e [dev/sit/uat/prod]: 设置环境，用作推送到特定环境
  1. fk oss: 用作 oss 文件推送
  • -m [module]: 模块名称
  • -e [dev/sit/uat/prod/front]: 环境变量，用作推送到特定环境

Readme

Keywords

none

Package Sidebar

Install

npm i fkww

Repository

www.npmjs.com/package/fkww

Weekly Downloads

0

Version

1.1.2

License

MIT

Unpacked Size

96.3 kB

Total Files

73

Last publish

Collaborators

  • wei.wu
Try on RunKit
Report malware