@shitou/jdp

前端开发工具

Usage no npm install needed!

<script type="module">
  import shitouJdp from 'https://cdn.skypack.dev/@shitou/jdp';
</script>

README

@shitou/jdp

安装

mac安装

sudo npm i -g @shitou/jdp cybmock  --unsafe-perm

上面如果安装报错因为是环境问题 需要降级 自己npm 版本或者采用下载nrm 切换到 yarn cnpm 源下载相关包

推荐使用《nrm》切换下载源

sudo npm install -g nrm

nrm ls

nrm use yarn

 npm -------- https://registry.npmjs.org/
* yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

windows安装 暂时没有发现安装问题


npm i @shitou/jdp -g

模块

初始化本地开发包 或者《拉取最新的开发包版本》 必须操作

jdp c npm 
或者
jdp c cnpm 
或者 
jdp c yarn


jdp create npm 
或者
jdp create cnpm 
或者 
jdp create yarn

初始化项目模块

jdp init 目录名   或	jdp i 目录名	

创建完成后 目录结构如下


目录名
├── jdp.config.js
└── src
    ├── cybmock.config.js
    ├── data
    │   └── test.json
    ├── img
    │   └── plus.png
    ├── index.html
    ├── js
    │   ├── config.js
    │   ├── lab
    │   │   ├── pan-os.min.js
    │   │   └── tea.js
    │   └── pack-index.js
    ├── js-lab
    │   └── common.js
    ├── mock
    │   └── test.js
    └── sass
        ├── _header.scss
        ├── _init.scss
        ├── _mixin.scss
        └── index.scss

jdp.config.js 内容如下 一定要配置相关内容:


// 输出目录名
const dir = 'dirName';

// 版本号
const version = 20190904;

let configs = {
    routeConfig: {
        js: `${dir}/${version}/js/`,
        img: `${dir}/${version}/img/`,
        css: {
            path: `${dir}/${version}/css`
        },
        html: {
            needInject: false,
            template: 'src/index.html',
            outName: 'index.html'
        }
    },
    rem: {
        need: true, //是否需要REM转换
        psdWidth: 750
    },
    cdn: {
        online: '//线上cnd地址',      
        beta: '//线上cnd地址'
    },
    git: {
        url: '代码库关联',
        branch: '代码库分支名',
        sourseDir:dir,
        gitDirName:'git生成的目录名'
    },
    historyApi:false //是否用historyApi路由开发项目 很重要 默认关闭
};

module.exports = configs


开启服务模块

启动服务功能,同时启动mock服务

jdp server dev  
或者  
jdp s dev

现有功能只支持 dev 服务,后期拓展别的功能。

打包模块

jdp pack dev		打开发环境包
jdp pack beta		打预发环境包
jdp pack pro		打线上环境报

或者
jdp p dev		打开发环境包
jdp p beta		打预发环境包
jdp p pro		打线上环境报

部署模块

现有版本 只支持 部署到 预发

jdp deploy beta  部署预发包预发
jdp deploy pro   部署线上包到预发
或者
jdp d pro 		部署到预发
jdp deploy pro  部署线上包到预发

需要 jdp.config.js git 部分配置对应关系 还需要 在Git Hooks 配置相关配置项

包查询模块

查询工具所有包和对应版本

jdp query all
或者
jdp q all

单个包版本查询

jdp query react
或者
jdp q react

包大小分析功能,主要对打包以后的包大小进行分析

jdp a pro
或者
jdp a beta
或者
jdp a dev

后续功能陆续献上 未完待续.......