jarvis-react

jarvis-react

React 开发工具合集：

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

功能

[ ] 初始化项目/组件开发模板

[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

快速上手

• 初始化项目配置

jarvis init config

• 本地开发 React 应用或组件

$ jarvis dev

• 构建 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 字段