amos-init

    2.1.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i amos-init

    DownloadsWeekly Downloads

    0

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    139 kB

    Total Files

    54

    Last publish

    Collaborators

    • avatar