@ali-i18n-fe/dada-component/README.md

dada component

# 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` 可进行编译配置扩展。

```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`