jarvis-react

React脚手架及命令行工具合集

Usage no npm install needed!

<script type="module">
  import jarvisReact from 'https://cdn.skypack.dev/jarvis-react';
</script>

README

jarvis-react

React 开发工具合集:

  • 本地开发和构建 React 应用
  • 本地开发和构建多种模块化方案的 React 组件
  • 初始化项目的 tsconfig eslint prettier 等配置

功能

[x] 初始化项目开发模板

[ ] 初始化组件开发模板

[x] 初始化项目配置文件:tsconfig jsconfig perttier eslint stylelint editorconfig

[x] 使用 webpack-dev-server 本地开发应用

[x] 使用 webpack 打包应用

[x] 使用 babel 编译 CommonJS 格式的组件

[x] 使用 babel 编译 ESModules 格式的组件

[x] 使用 rollup 编译 UMD 格式的组件

[ ] 本地开发组件

install

$ npm install -g jarvis-react

快速上手

  1. 初始化项目配置
$ jarvis init config
  1. 初始化应用项目工程目录
$ jarvis init app [name?]
  1. 本地开发 React 应用或组件
$ jarvis dev
  1. 构建 React 应用或组件
$ jarvis build

配置文件

在本地开发应用或组件时,支持自定义配置文件。在根目录下创建jarvis.config.js,内容如:

module.exports = {
  mode: 'app',
};

共同配置项

mode

设定当前开发模式

类型:"app" | "component"

默认值:"app"

  • app 为 React 应用,
  • component 为 React 组件

outDir

设定输出文件夹

类型:string

当 mode 的值为 app 时,outDir 默认值为 dist

当 mode 的值为 component 时

  • CommonJS 格式默认值为lib
  • ESModules 格式默认值为lib
  • UMD 格式默认值为dist

port

本地开发时启动的端口

类型:number

默认值:3000

proxy

本地代理 与 devServer 一致Proxy

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    secure: false,
    changeOrigin: true
  },
}

App 配置项

sourceMap

是否输出 map 文件

类型: bollean

默认值: false

在 development 模式下,默认开启 sourceMap。production 时才会读取该配置项

themes

配置 less 变量(主题)

类型:Record<string, string>

默认值:{}

// TODO antd 的主题支持

Component 配置项

umd

是否输出 UMD 格式包

类型:boolean

默认值:false

external

外链,指定使用外部方式加载的包(不会打包到源代码中)。仅在 umd 格式下生效

Rollup external

类型:string[]

默认值:`["react","react-dom"]

globals

外部依赖的变量名称,与 external 一起使用。仅在 umd 格式下生效

Rollup globals

默认值:

{
  "react": "React",
  "react-dom": "ReactDOM"
}

name

配置全局环境下的变量名称,如window.xxx

Rollup name

类型:string

默认值:package.json 下的 name 字段