builder-victory-component

Builder Archetype - Victory Component

Builder Archetype: Victory Component

A Victorycomponent archetype for builder.

Installation

To use the production and development workflows, install both this package and the development module:

$ npm install --save builder-victory-component
$ npm install --save-dev builder-victory-component-dev

Project Structure

This archetype assumes an architecture as follows:

.
├── .builderrc                  # Configures builder archetype
├── .eslintrc                   # Configures eslint
├── package.json
├── demo                        # Component demo
│   ├── app.js
│   └── index.html
├── dist                        # Distribution build destination (standalone)
├── lib                         # Lib build destination (npm)
├── src                         # Component source
│   ├── components
│   │   └── *.js
│   └── index.js
├── perf                        # Component performance benchmarks
    └── .eslintrc               # Configures eslint for tests
    └── client
        ├── main.js
        ├── bench
        │   └── components
        │       └── *bench.js?
        └── test.html
└── test                        # Component tests
    └── .eslintrc               # Configures eslint for tests
    └── client
        ├── main.js
        ├── spec
        │   └── components
        │       └── *.js
        └── test.html

The namefield in package.json(the published npmpackage name) is assumed to be:

  1. The desired file name of the distribution files and dash-cased.
  2. The desired default exported class name when converted to PascalCase.

So, if a package.jsonhas:

{
  "name": "my-cool-component"
}

The distribution files to output are:

dist/my-cool-component.js
dist/my-cool-component.js.map
dist/my-cool-component.min.js
dist/my-cool-component.min.js.map

and the exported class name is MyCoolComponent.

An example project using this structure is: formidable-react-component-boilerplate

Usage Notes

Eslint

The implementing project will need to add an .eslintrcfile in the root which should extend the archetype eslint configuration. Another .eslintrcfile should be placed in the test/directory, extending the test eslint configuration. The presence of these files ensures support for most editor and IDE lint plugins.

These files will be added automatically when generating a new Victory component using builder-init builder-victory-component:

--- # <ROOT>/.eslintrc
  extends: ./node_modules/builder-victory-component/config/eslint/.eslintrc-source
--- # <ROOT>/test/.eslintrc
  extends: ../node_modules/builder-victory-component/config/eslint/.eslintrc-test

Babel Configuration

This archetype does not currently specify its own .babelrc. Your project should specify its own in the root directory if you want non-default Babel settings (like using stage 0, for instance). See the recommended settings.

peerDependencies

This archetype is meant to be used in a very specific context: A Victory component. As such, it's assumed that the implementing component bring along these dependencies:

  • react& react-dom 0.14+
  • Most Victory components will also want to depend on `radium 0.16+``.

The reason we don't specify these in the archetype package.json's peerDependenciesis to lower the friction to testing out betabuilds of React by specifying a peerof react 0.14.x. Similarly, specifying a peerof >=0.14.xwould imply that we're compatible with future React releases, something we can't promise.

Tasks

Run $ builder helpto see usage.

Usage:

  builder <action> <task(s)>

Actions:

  run, concurrent, envs, help

Flags: General

  --builderrc: Path to builder config file (default: `.builderrc`)

  --help: Display help and exit

  --version: Display version and exit

  --quiet: Silence logging

  --log-level: Level to log at (`info`, `warn`, `error`, `none`)

  --env: JSON string of environment variables to add to process

  --env-path: JSON file path of environment variables to add to process

Task Configs:

  wds_port_dev
    [builder-victory-component] 3000

  wds_port_test
    [builder-victory-component] 3001

Tasks:

  npm:postinstall
    [builder-victory-component] builder run build --expand-archetype

  npm:postpublish
    [builder-victory-component] publishr postpublish -V

  npm:postversion
    [builder-victory-component] publishr postversion -V

  npm:preversion
    [builder-victory-component] builder run check

  npm:test
    [builder-victory-component] builder run test-frontend

  npm:version
    [builder-victory-component] builder run clean && builder run build

  build
    [builder-victory-component] builder concurrent --queue=1 build-libs build-dist

  build-babel
    [builder-victory-component] babel src --copy-files

  build-dist
    [builder-victory-component] builder run clean-dist && builder concurrent --queue=1 build-dist-min build-dist-dev

  build-dist-dev
    [builder-victory-component] webpack --bail --config node_modules/builder-victory-component/config/webpack/webpack.config.dev.js --colors

  build-dist-min
    [builder-victory-component] webpack --bail --config node_modules/builder-victory-component/config/webpack/webpack.config.js --colors

  build-es
    [builder-victory-component] builder run clean-es && builder run --env '{"BABEL_ENV":"es"}' build-babel -- -d es

  build-lib
    [builder-victory-component] builder run clean-lib && builder run --env '{"BABEL_ENV":"commonjs"}' build-babel -- -d lib

  build-libs
    [builder-victory-component] builder concurrent --queue=1 build-lib build-es

  build-watch
    [builder-victory-component] builder concurrent build-lib build-es -- -w

  check
    [builder-victory-component] builder run lint && builder run npm:test

  check-ci
    [builder-victory-component] builder run lint && builder run test-ci

  check-cov
    [builder-victory-component] builder run lint && builder run test-cov

  check-dev
    [builder-victory-component] builder run lint && builder run test-dev

  check-perf
    [builder-victory-component] builder run lint-perf && builder run test-perf

  clean
    [builder-victory-component] builder concurrent clean-lib clean-dist clean-es

  clean-dist
    [builder-victory-component] rimraf dist

  clean-es
    [builder-victory-component] rimraf es

  clean-lib
    [builder-victory-component] rimraf lib

  dev
    [builder-victory-component] builder concurrent server-dev server-test

  hot
    [builder-victory-component] builder concurrent server-hot server-test

  lint
    [builder-victory-component] builder concurrent lint-source lint-demo lint-test

  lint-demo
    [builder-victory-component] eslint --color demo

  lint-perf
    [builder-victory-component] eslint --color perf

  lint-source
    [builder-victory-component] eslint --color src

  lint-test
    [builder-victory-component] eslint --color test

  open-demo
    [builder-victory-component] opener http://127.0.0.1:3000

  open-dev
    [builder-victory-component] builder concurrent dev open-demo

  open-hot
    [builder-victory-component] builder concurrent hot open-demo

  server-dev
    [builder-victory-component] webpack-dev-server --config node_modules/builder-victory-component/config/webpack/demo/webpack.config.dev.js --colors --content-base demo

  server-hot
    [builder-victory-component] webpack-dev-server --config node_modules/builder-victory-component/config/webpack/demo/webpack.config.hot.js --colors --inline --hot --content-base demo

  server-test
    [builder-victory-component] webpack-dev-server --config node_modules/builder-victory-component/config/webpack/webpack.config.test.js --colors

  test-ci
    [builder-victory-component] builder run test-frontend-ci

  test-cov
    [builder-victory-component] builder run test-frontend-cov

  test-dev
    [builder-victory-component] builder run test-frontend-dev

  test-frontend
    [builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.js

  test-frontend-ci
    [builder-victory-component] karma start --browsers PhantomJS,Firefox node_modules/builder-victory-component/config/karma/karma.conf.coverage.js

  test-frontend-cov
    [builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.coverage.js

  test-frontend-dev
    [builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.dev.js

  test-frontend-perf
    [builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.perf.js

  test-perf
    [builder-victory-component] builder run test-frontend-perf

  version-dry-run
    [builder-victory-component] publishr dry-run -V

HomePage

https://github.com/FormidableLabs/builder-victory-component

Repository

https://github.com/FormidableLabs/builder-victory-component.git


上一篇:builder-support
下一篇:builder-victory-component-dev

相关推荐

  • 配置节点表示为静态bower_components?

    Amol M KulkarniConnor Leech(https://stackoverflow.com/users/1933917/amolmkulkarni)提出了一个问题:configure ...

    2 年前
  • 邂逅react(九)-component组件化开发

    今天想分享一下react的核心知识之组件化开发~~1.关于组件化的理解:组件化就是把一个页面或者复杂的功能拆解成一个个小组件,让这些小组件各自分工有序配合构成我们的页面或复杂的程序. 2.为什么要组件...

    1 个月前
  • 解读 vue-class-component 源码实现原理

    导读 使用过一段时间 class 来定义组件,要用 vuepropertydecorator 提供定义好的装饰器,辅助完成所需功能,对这个过程好奇,就研究了源码。内部主要依靠 vueclasscomp...

    3 个月前
  • 解决vue报错Failed to mount component

    Vue warn: Failed to mount component: template or render function not defined. 今天上班运行vue项目,当我进入昨天写的一个...

    2 年前
  • 解决react:Warning: componentWillMount has been renamed问题

    1. 问题描述 当我新克隆一个react项目,然后安装好依赖包后,启动服务,发现浏览器控制台报如下warning: QQ20191101004128.png(https://img.java...

    9 个月前
  • 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性。但在尝试之前,最好先阅读本文,对 Function Component 的思维模...

    1 年前
  • 白话速述 styled-components 4.x 的使用

    废话不多话,来上车! 安装: 简述使用: 1、 创建全局的样式: 首先创建一个JS文件,例如style.js ①:import { createGlobalStyle } from 'st...

    2 年前
  • 用slot和component实现表单共用

    业务需求 在oa开发中,有许多流程,每个流程里都会有很多字段,比如流程标题、拉下选择,附件等等,有些是每个流程都会有的,有些是特有的,按常规的方法开发,就为为一个流程写一个表单,校验,提交。

    2 年前
  • 用HBuilder打包简单项目(vue项目)APP的步骤

    今天 小姐姐给大家分享下自己这两天用HBuilder封装APP的具体步骤,自己也做个小笔记 1. 第一步首先打包好自己的项目(vue开发的项目),打开编辑器打开打包好的dist文件,填...

    1 年前
  • 用 shell 脚本批量拉取更新 Antd 依赖库,rc-component

    用 shell 脚本批量拉取更新 Antd 依赖库,rccomponent仓库的项目 项目地址 需求背景 实现思路 技术实现 demo 步骤 需求背景 有时候看 api 无法实现的需求、想看下源码怎...

    1 个月前

官方社区

扫码加入 JavaScript 社区