Soul Archetype

Soul Archetype(React)前端脚手架构建工具

安装

需node 14.16.1及以上

全局安装提供一个 sac 命令，用于项目的快速开发。

npm install -g soul-archetype

在项目内使用，安装到devDependency依赖中，通过在package.json中添加命令使用 sac 命令

npm install -D soul-archetype

指令说明：

new

新建项目

目前template name有：

• react-antd 单页面
• react-antd-mobile 移动端webapp
• react-antd-mpa 多页面

sac new [template name] [project name]

运行项目： 可添加环境变量配置，默认配置--env=dev（即config文件内配的dev.env.js,可自定义名称）

单页面项目：
sac run start

多页面项目：
sac run start [entry name]

run

构建项目

在项目根目录下生成dist文件夹

sac run build --env=[config中自定义的环境文件名]

g

生成模板文件

sac g [template name] [model name]

使用文档请查看https://www.npmjs.com/package/soul-archetype-template

dataModel数据模型创建：

在项目根目录创建model文件夹，文件名为[model name].model.js

示例：

创建一个表格组件 需要传表格的column数据模型

sac g table test

需要创建 "你的项目/model/test.model.js"

//test.model.js
module.exports = {
  "name":{
    "label":"姓名",
    "type": "text"
  }
}

server

启动http-server预览打包文件

sac server

可在sa.config.js中配置参数:

//默认
server:{
    host:'0.0.0.0',
    port:'8080',
    root:'./dist'
}

help|h

帮助

sac help|h

sa.config.js配置

• type [String]

  • 单页面：'react-antd'
  • 多页面：'react-antd-mpa'

• webpack [Object]

  • entry

    • 单页面：不配置，默认path.resolve('./src/index.js')

    • 多页面：配置一个数组，数组项是各个入口的name

      如：['entry1', 'entry2']

      注意：多入口的页面要放在根目录下entries文件夹下 入口的名字对应文件名

  • html

    • 单页面 [Object]

      //以下是favicon和template的默认值 不配置即用默认配置
      html: {
          title: '页面标题',
          favicon: './src/assets/img/favicon.ico'
          template: './src/index.html'
      }

    • 多页面 [Array]

      //entry对应多页面中配置的entry
      html: [
          {
              entry: 'entry1',
              title: 'entry1 pro'
          },
          {
              entry: 'entry1',
              title: 'entry1 pro'
          }
      ]

• merge [Object]

  完全merge进config中 以便新增sa没有配置的东西

• build [Object]

  • version 默认为true 设为false时不打包成版本号包

参考

• nwb