dada-comp

Dada 标准组件模块编译脚手架，提供 Component 开发整体流程的各阶段脚手架命令。标准化组件开发流程，统一组件编译环境、编译配置、发布环境、发布配置、自动截图、自动生成 README 等功能。

Install

npm i -g @ali-i18n-fe/dada-component

Usage

dada-comp [cmd]

[cmd] 为 dada-comp 子命令，目前支持以下命令及功能

• dada-comp new 处理按照模板新建一个标准组件
  • 初始化一个标准组件项目结构，所有接入所有 dada-comp 命令
• dada-comp start 处理日常开发，附加单个组件展示及调试能力
• dada-comp watch 处理 babel 及 scss 监听编译，用于 link 场景
• dada-comp dev 处理监听编译 umd 包，用于代理调试
• dada-comp build 处理编译最终产物
  • webpack 编译 UMD 包
  • Babel 包
• dada-comp build-stories 编译组件文档及 Demo
• dada-comp babel 处理编译 npm 包
• dada-comp test 处理 jest 单元测试
• dada-comp snapshot 按照 Docs 示例中截图
• dada-comp readme 自动生成 README
• dada-comp analyzer 分析编译包大小

扩展配置

在项目根目录下建立 dada.config.js 可进行编译配置扩展。

// dada.config.js
module.exports = {
  // 组件库暴露的全局名，等同webpack.output.libraryName
  libraryName: "dada-render-component",

  // [可选]Demo页扩展html，如果配置了externals，配合使用进入资源
  // 如果externals资源未成功加载，会导致Demo、截图及一些配套信息生成异常
  extendTemplate: "template.html",

  // [可选]Webpack 配置扩展
  webpackMerge: {
    externals: {
      moment: "moment",
      "@alifd/next": {
        commonjs: "@alifd/next",
        commonjs2: "@alifd/next",
        amd: "Next",
        root: "Next"
      }
    }
  },

  // [可选] 截图配置，配置参数参考：https://github.com/puppeteer/puppeteer/blob/v2.1.1/docs/api.md#pagesetviewportviewport
  snapshot: {
    width: 800
  },
};

除此之外，如果你的项目需要额外的 Babel 配置，可直接在当前目录下建立.babelrc文件，babel 扩展无其他影响。

另外，如需查看当前命令下的 webpack 配置，可以在命令后加入 --debug ，编译过程中将会打出 webpack 配置，eg. dada-comp start --debug