amos-init

[amos fe 团队使用,谨慎使用] amos-init 是基于react.js的脚手架，可以一键生成react项目的环境。

同时，如果采用 React-Native 脚手架生成 RN 项目，也可采用 amos-init-rn 来初始化通用 RN 项目。

author

ilex.h

install

你可以通过以下命令安装amos-init

npm install amos-init -g

初始化项目（amos-init 初始化 React 项目）

执行如下命令：

amos-init -i [projectName]

系统会在当前目录下新建如下结构的文件目录(dist为编译或者发布后打包目录)：

demo目录提供了一个简易react项目,可直接运行 npm start进行启动。

.
├── build
├── demo                    // 默认提供一个可直接运行的示例
├── dist
│   ├── app
│   ├── static
├   └...
└── src
    ├── assets              // 静态资源入口
    ├── consts              // 常量
    ├── entry               // 项目程序入口
    │   ├── entyr1
    │   └── entyr2
    ├── model               // 数据驱动,redux和action
    │   ├── actions
    │   ├── reducers
    │   └── [other]         // 可选,手动建立
    │── routes              // 路由入口
    │── store               // 系统store
    │── styles              // 系统核心样式
    │── utils               // 工具类
    └── view                // 页面元素,该目录下存放所有的系统react组件
          ├── module1
          │   └── submodule
          ├── module2
          ├── module3
          └── ...
  ├── .editconfig
  ├── .eslintignore
  ├── .eslint
  ├── .jsbeautifyrc
  ├── .stylelintrc.json
  └...

注意：工程父级目录文件夹名称不要包含字符串 node_modules ，否则则无法使用babel进行转译！

构建[advance]

可以通过amos-init -b 进行构建项目，amos-init会扫描目录下的所有 *.entry.js 文件，自动制作编译配置文件(.amos-init/entry.js)，

amos-init -b

如果想编译指定的项目 可以使用 amos-init -b Name 这样amos-init只会编译 Name文件夹下的 *.entry.js 以及 Name.entry.js

如下配置会编译 test和abc

amos-init -b test,abc

执行 amos-init -b online 会进行上线的前的编译（压缩、合并、hash）等，并将产出的文件放置到released目录中

amos-init -b online

创建[advance]

amos-init -c [component name]

可以通过amos-init -c [component name]进行创建组件，默认无法自动创建带路径的文档，此时如果需要创建带路径的组件，则需要手动创建doc目录。

示例:

amos-init -c MyComponent

此时会生成如下文件:

docsite
│──components
│   └──docs
│      └──MyComponent.adoc
src
└──MyComponent
   ├──index.js
   └──index.scss

amos-init -p [page name or page path]

可以通过amos-init -p [page name or page path]进行创建组件

示例:

$ amos-init -p home

$ amos-init -p home/notice

$ amos-init -p home/alarm

$ amos-init -p home/shortcut

此时会生成如下文件:

src
└──home
   ├──index.js
   ├──index.scss
   └──notice
      ├──index.js
      └──index.scss
   └──alarm
      ├──index.js
      └──index.scss
   └──shortcut
      ├──index.js
      └──index.scss
...

[TODO] some advance api：

新增一个项目页面，同时会建立项目的index.html , pagename.js , pagename.scss 文件

amos-init -a [pagename]

支持其他类库的编译（vue等）

amos-init -ls

[Scripts]

系统初始化之后，会默认创建多种 scripts 脚本，用于快速使用 npm 脚本。

其中 startnNdemon 会自动监听 webpack.config.js 文件，用于频繁更改 webpack 配置时使用，此时需要手动安装 nodemon（已安装可忽略该步）.

# 全局
$ npm install -g nodemon

# 本地
$ npm install --save-dev nodemon

初始化 RN 项目

安装&执行命令

$ react-native init [ProjectName]

$ cd [ProjectName]

$ amos-init-rn

输出

生成目录结构如下：

.
├── __tests__
├── android                 // 安卓 Native 目录
├── ios                     // IOS Native 目录
└── src                     // RN代码目录
    ├── assets              // 静态资源入口
    ├── consts              // 常量
    ├── model               // 数据驱动,redux和action
    │   ├── actions
    │   ├── reducers
    │   └── [other]         // 可选,手动建立
    │── store               // 系统store
    │── stylesheet          // 抽离RN系统样式
    │── utils               // 工具类
    └── view                // 页面元素,该目录下存放所有的系统RN组件
          ├── module1
          │   └── submodule
          ├── module2
          ├── module3
          └── ...
  ├── .editconfig
  ├── .eslintignore
  ├── .eslint
  ├── .jsbeautifyrc
  ├── index.android.js      // android入口
  ├── index.ios.js          // ios入口
  └...

启动

• android

$ npm run android

• ios

$ npm run ios

• 启动package server（上述命令没有自动启动package server时，则手动启动）

$ npm start

注意: 需要启动模拟器，或者已经连接真机。

打包bundle

• android

$ npm run pub-android

• ios

$ npm run pub-ios

打包apk

签名 [该部分内容详见官方文档]

1. 生成一个签名密钥

你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中（比如C:\Program Files\Java\jdkx.x.x_x\bin），你可能需要在命令行中先进入那个目录才能执行此命令。

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

在运行上面这条语句之后，密钥库里应该已经生成了一个单独的密钥，有效期为10000天。--alias参数后面的别名是你将来为应用签名时所需要用到的，所以记得记录这个别名。

注意：请记得妥善地保管好你的密钥库文件，不要上传到版本库或者其它的地方。

2. 设置gradle变量

• 把my-release-key.keystore文件放到你工程中的android/app文件夹下。

• 编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）

注意：~表示用户目录，比如windows上可能是C:\Users\用户名，而mac上可能是/Users/用户名。

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

上面的这些会作为全局的gradle变量，我们在后面的步骤中可以用来给应用签名。

关于密钥库的注意事项: 一旦你在Play Store发布了你的应用，如果想修改签名，就必须用一个不同的包名来重新发布你的应用（这样也会丢失所有的下载数和评分）。所以请务必备份好你的密钥库和密码。

提示：如果你不想以明文方式保存密码，同时你使用的是macOS系统，那么你也可以把密码保存到钥匙串（Keychain）中。这样一来你就可以省略掉上面配置中的后两行（即MYAPP_RELEASE_STORE_PASSWORD和MYAPP_RELEASE_KEY_PASSWORD）。

3. 添加签名到项目的gradle配置文件

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

###打包apk

测试应用的发行版本

$ npm run install-apk

生成发行APK包

$ npm run prod-apk

注： 生成的APK文件位于android/app/build/outputs/apk/app-release.apk，它已经可以用来发布了。同时，以上命令建议直接在vscode终端执行。

内网用户

内网用户还可采用 amos-tpl 进行业务代码生成。

全局安装:

$ npm install -g amos-tpl

本地安装:

$ npm install --save-dev amos-tpl

其中 web 项目采用 amos-tpl -w 生成 web 基础工程

Mobile 项目采用 amos-tpl -m 生成 mobile 基础工程

由于模板工程依赖了其他模块，请确保amos-rn-core-ui、ray-validate、react-native-tab-navigator、react-native-router-flux已经成功能安装。

命令如下：

# 如果未执行 amos-init-rn，请优先执行amos-init-rn，然后再执行如下命令
$ npm install --save amos-rn-core-ui ray-validate [email protected] [email protected]

注意

本脚手架基于 Node.js 平台，生成独立的开发环境。如果数据是第三方提供，则需要接口提供者开通 CORS 跨域。

部署上线后，可采用 Nginx 进行前端独立部署，也可采用前后端合并部署(该方式部署，可取消 CORS 配置)。

change log

changes

License

MIT