amos-init

the FED init for amos team

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
amos-init
Minified + gzip package size for amos-init in KB

Readme

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参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。

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

  1. 设置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)。

  1. 添加签名到项目的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

changes

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.