abc-cli

0.2.70 • Public • Published

abc-cli

讯盟开发套件,基于 webpack,包含开发时全生命周期管理,生成脚手架,自动创建项目仓库并关联(可控制),本地开发,调式,打包上线以及 eslint 检测和代码提交规范,大部分场景下用户无需关心 webpack 配置,通过简单配置即可进行本地调试和线上打包

node >= 7.6.0

默认支持

  • 支持 iconfont, jpg, jpeg, png, gif, svg, vue, less,scss 格式
  • 支持 postcss,autoprefixer
  • 支持 react, vue, ts
  • 支持 es6 语法
  • 支持 hmr
  • 支持接口代理
  • 支持异步代码动态加载
  • 默认启用 lodash, date-fns, moment(仅打包中文语言包), antd(按需打包) 优化,大幅减少打包体积
  • 支持 dll 打包,大幅提升生成环境构建速度,以及持久化缓存
  • 基于 webpack 4.x
  • 基于 webpack-serve

安装

## 安装 yarn
npm i -g yarn

## 安装 abc 工具,一个组件生成和构建工具
yarn add global abc-cli

基本配置

  • 本地开发调试 - 启动调式服务器,启动的服务器默认拥有 hmr 功能
abc dev
  • 代码上线阶段 - 执行代码构建
abc build
  • 代码 babel 转义
abc babel
  • 发布上线
abc publish

高阶配置 - 完整的配置文件(abc.config.js)说明

{
  "port": 8080, // 服务器端口配置,默认 8080
  "host": "localhost", // host地址配置,默认 localhost
  "entry": {}, // 入口文件配置,一般需要覆盖配置,比如:entry: { app: './index.js' },同 webpack 配置方式一致
  "output": {}, // 输出配置,默认:{ path: './build', filename: '[name].js' },同 webpack 配置方式一致
  "rules": [], // loader 配置,同 webpack 配置方式一致
  "plugins": [], // 插件配置,同 webpack 配置方式一致
  "alias": {}, // 别名配置,同 webpack 配置方式一致
  "staticPath": "", // 开发模式下的静态目录,线上构件时,会将静态目录下的文件拷贝到 output 中配置的 path 路径中
  "babelOptions": {}, // babel 选项配置, 配置同 .babelrc 文件一致
  "browsersList": null, // autoprefixer 中的支持浏览器规则配置
  "isExtractCss": true, // 是否抽离 css 成单独的文件,默认抽离成单独的文件,如果启用了 cssModule,此选项不生效
  "cssModule": {
    "enable": false,
    "localIdentName": `[local]-[hash:base64:5]`
  }, // 是否启用 cssModule,默认 false
  "microApp": false, // 是否微应用模式
  "bundleStats": false, // 是否输出统计信息,便于性能优化时做分析
  "terserConfig": {}, // 默认配置 { parallel: true, terserOptions: { compress: { drop_console: true, drop_debugger: true } } }
  "splitChunks": {}, // 拆包配置
  "compileDependencies": [], // 指定需要编译的三方包,一般用于需要兼容 ie11 浏览器,但是项目依赖的三方包不支持 ie11 的场景
  "enableHtmlWebpackPlugin": true, // 是否启用 HtmlWebpackPlugin 插件
  "htmlTemplateUrl": "", // 页面启动页默认配置,一般需要覆盖配置
  "htmlWebpackPluginOptions": {}, // htmlWebpackPlugin 插件选项配置, 优先级高于 htmlTemplateUrl 配置项
  "devtool": "eval-source-map", // soucemap 配置,开发模式下使用,默认:eval-source-map
  "outputDir": "dist", // 打包输出路径
  "disableErrorOverlay": false, // 是否加载 ErrorOverlayPlugin 插件
  "proxy": {}, // 代理设置,比如:{ '/api': 'http://www.aliyun.com/mocks', 'example/:id': (params) => return { target: 'http://localhost:8080/', logs: true } }
  "terserConfig": {}, // 默认配置 { parallel: true, terserOptions: { compress: { drop_console: true, drop_debugger: true } } }
  "history": {
    "whiteList": [] // history 路由下的白名单配置,比如接口代理时,配置在 whiteList 中的接口,不经过中间件处理
  },
  "https": false, // 是否启用 https, 默认:false
  "jsxLoader": [], // 针对 js, jsx 的 loader 配置
  "tsxLoader": [], // 针对 ts, tsx 的 loader 配置
  "resolvePlugins": [], // 针对 resolve 中的 plugins 配置
  "externals": {
    // 比如:不打包 react, react-dom, jquery,一般开发组件时,需要配置 externals
    "react": {
      "root": "React",
      "commonjs2": "react",
      "commonjs": "react",
      "amd": "react"
    },
    "react-dom": {
      "root": "ReactDOM",
      "commonjs2": "react-dom",
      "commonjs": "react-dom",
      "amd": "react-dom"
    },
    "jquery": {
      "root": "jQuery",
      "commonjs2": "jquery",
      "commonjs": "jquery",
      "amd": "jquery"
    }
  },
  "env": {
    "development": {
      // 开发环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    },
    "daily": {
      // 日常环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    },
    "production": {
      // 生产环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    }
  },
  "dll": {
    "enable": false, // 是否启用 dll 打包,启用了 dll 打包后,请先执行 abc dll,可大幅提升构建速度
    "vendors": ["react"] // 指定第三方包生成到 vendor 文件中
  },
  "cleanBuild": true, // 每次构建是否清除 build or dist 目录,默认 true
  "analyzerReport": false, // 生成打包分析报告,默认 false,方便分析打包后的 bundle 文件构成
  "buildNotifier": {
    "show": true, // 是否启用构建通知栏提醒,默认 true
    "title": "abc build", // 通知标题
    "timeout": 5 // 通知超时时间,默认:5s
  }
}

一些典型的配置

  • 指定入口和模板路径,以及设置代理
{
  "entry": {
    "app": "./src/index.js"
  },
  "htmlTemplateUrl": "./index.html",
  "proxy": {
    "/api": "http://www.aliyun.com/mocks"
  }
}

Package Sidebar

Install

npm i abc-cli

Weekly Downloads

21

Version

0.2.70

License

ISC

Unpacked Size

68.1 kB

Total Files

18

Last publish

Collaborators

  • langford