component-build-script

English | 中文

component-build-script is a command-line tool for quickly developing and building react, vue, and node components that help developers strip common components without having to worry about the configuration of the development environment. Support for ES and Typescript.

command

  / ___| | __ )  / ___|
 | |     |  _ \  \___ \
 | |___  | |_) |  ___) |  \____| |____/  |____/

cbs <command>
Commands:
  cbs start <component-type>  start dev server
  cbs build <component-type>  build

Options:  --version  Show version number  [boolean]
  --help     Show help  [boolean]

How to use

• Create a project directory (if you can skip it):

  mkdir my-component

  cd my-component

• Install component-build-script as a project development dependency (recommended)

  npm install component-build-script -D

• Set the npm script package.json

    {
        "scripts":{
            "start":"cbs start react",
            "build":"cbs build react"
        }
    }

Note: For the first run, you will be asked to specify the entry file and development language.

Precautions:

• component-build-script is suitable for development components and is not suitable for applications. If you need to develop an application, you can choose the corresponding excellent tools, such as:create-react-app,vue-cli

• cbs build output path

  • build/dist : Webpack output file for browser use
  • build/lib :commonjs file
  • build/module: Es module file
  • build/typings：Typescript .d.ts declaration file

• babel runtime file, you need to write runtime file to dependencies @babel/plugin-transform-runtime

• Example package.json

  // package.json
  {
      "main": "build/lib/index.js",
      "typings": "build/typings/index.d.ts",
      "module": "build/module/index.js",
      "scripts":{
          "start":"cbs start react",
          "build":"cbs build react"
      },
      "dependencies":{
          "@babel/runtime-corejs2": "^7.0.0"
      }
  }
  

• style file

Style files enable CSS Modules by default, ensuring style isolation. In developing react components, styles should be set correctly.

    .red{
        color: red
    }

    import React from 'react'
    import style from './style/index.1.sass'
    export default function Test() {
        return <div className={style.red}>
        testssss
    </div>

• Vue component only generates dist files