Pp-deploy NPM | npm.io

pp-deploy使用手册

背景

随着业务项目越来越多，各个业务线前端代码都需要前端资源的构建、部署工具来支撑业务。而现在我们普遍采用的打包工具webpack，配置较为繁琐，业务各自配置自己的打包工具，无法做到最佳实践的共享、代码规范的统一等，且费时耗力，极大的影响了开发效率。

目的

为了更好更高效的开发效率，我们提供了统一的前端构建、部署工具 pp-deploy。

原则

为了减少不必要的繁琐配置，开箱即用，同时为了规范各业务目录结构，pp-deploy采用「约定大于配置」的设计原则，只提供必须的参数配置，不提供太多灵活的参数配置，例如我们规定，需要构建的前端代码必须放在名为 web的目录中。

安装

npm install pp-deploy --save-dev

配置

我们提供统一的配置文件deploy.config.js，以下为配置字段说明。

module.exports = {
  name: 'huke', // 必须，项目名称，全局唯一
  theme: './web/theme.less', // 非必须。全局样式配置文件路径
  cdnHost: 'qiyukf.nosdn.127.net', // 非必须。cdn域名，默认为qiyukf.nosdn.127.net
  webpack: {
    entry: { //暂时必须（下期将去掉）。webpack entry入口
      Page: './web/entry',
      h5page: './web/page/user/Content/index',
      miniSite: './web/page/miniSite/index',
      sysTools: './web/page/sysTools/index',
      miniCard: './web/page/miniCard/index',
      work: './web/page/work/index'
    },
    splitChunks: null //非必须。自定义webpack分包策略
  }
};

我们默认提供了一套分包策略如下，如果不满足你的业务需求，可以在splitChunks中自定义。

{
    chunks: 'all',
    minSize: 30000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
      libs: {
        name: 'libs', //不怎么变的基础库
        test: /node_modules\/(axios|babel-polyfill|react|react-dom|react-router|react-router-dom|redux|redux-thunk|react-redux|react-router-redux|lodash|core-js|rc-trigger|history|rc-animate|buffer)/,
        chunks: 'all',
        priority: 1
      },
      ppfish: { //ppfish较大，单独打出
        name: 'ppfish',
        test: /node_modules\/(ppfish)/,
        chunks: 'all',
        priority: -10,
        enforce: true
      },
      vendors: { //其他所有的第三方库
        name: 'vendors',
        test: /node_modules/,
        chunks: 'all',
        priority: -20,
        enforce: true
      },
      common: { //公共模块
        priority: -30,
        minSize: 100, //大小超过100个字节
        minChunks: 3, //最少引入了3次
        reuseExistingChunk: true
      }
    }
  }

使用

pp-deploy主要提供前端资源的构建、部署功能。另外集成了一个简单的 web server（webpack-dev-server），并且具有 live reloading(实时重新加载) 功能，可以用于你的本地开发环境。 CLI 命令说明:

功能	CLI 命令	参数说明
代码构建	pp-deploy --build	注意：代码构建时，需要设置NODE_ENVNODE_ENV=developmentNODE_ENV=production
代码发布到cdn	pp-deploy --cdn	--accessKey=xxx //nos accessKey--accessSecret=xxx //nos accessSecret--bucket=xxx //nos bucket名称 --env=xxx // 必须，发布环境名称。注意：项目名称和环境名称将会拼接到打包产生的manifest文件路径和名称上, 例如：http://nos.netease.com/{bucket}/{name}/manifest.{env}.json
启动本地服务	pp-deploy --start	常见配置：--port=xxx //指定启动端口，默认为8001--allowedHosts=xxx // 允许访问开发服务器白名单其他配置请参见webpack dev server文档

举个例子作为参考：

  "scripts": {
    "start": "rimraf dist && concurrently \"egg-bin dev --port 7001\" \"cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=7000 pp-deploy --start --allowedHosts=.urchin.netease.com\"",
    "build:dev": "rimraf dist && cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 pp-deploy --build",
    "build:prod": "rimraf dist && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 pp-deploy --build",
    "deploy:prod_gray": "pp-deploy --cdn --accessKey=b7e7f6715c6a4cffab9d28b5404f6f52 --accessSecret=e14192c67e7c426bb50c9d373a12e117 --bucket=qiyukf --env=prod_gray",
    "deploy:prod": "pp-deploy --cdn --accessKey=b7e7f6715c6a4cffab9d28b5404f6f52 --accessSecret=e14192c67e7c426bb50c9d373a12e117 --bucket=qiyukf --env=prod"
  },

默认约定说明

pp-deploy --build
- 编译产生的manifest文件路径和名称：http://nos.netease.com/{bucket}/{name}/manifest.{env}.json
- 编译结果输出目录为: dist
- 编译产生的manifest文件名为：asset-manifest.json
- 默认配置alias: { '@': 'web' }
pp-deploy --start
- 本地服务默认端口：8001