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
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 pathbuild/dist
: Webpack output file for browser usebuild/lib
:commonjs
filebuild/module
:Es module
filebuild/typings
:Typescript
.d.ts declaration file
-
babel runtime
file, you need to writeruntime
file todependencies
@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' { return <div => testssss </div>
- Vue component only generates
dist
files