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
签名 [该部分内容详见官方文档]
- 生成一个签名密钥
你可以用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参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。
注意:请记得妥善地保管好你的密钥库文件,不要上传到版本库或者其它的地方。
- 设置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)。
- 添加签名到项目的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 react-native-tab-navigator@0.3.4 react-native-router-flux@3.34.0
注意
本脚手架基于 Node.js 平台,生成独立的开发环境。如果数据是第三方提供,则需要接口提供者开通 CORS 跨域。
部署上线后,可采用 Nginx 进行前端独立部署,也可采用前后端合并部署(该方式部署,可取消 CORS 配置)。
change log
License
MIT