React+Cordova+Android环境配置

0、版本说明

node v8.11.1
npm 5.6.0
cordova 8.0.0
cordova platform android 7.0.0

1、nvm-windows安装

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

2、配置nvm-windows镜像

打开文件C:\Users\Administrator\AppData\Roaming\nvm\settings.txt，添加

node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

3、安装nodejs

到nodejs官网Node.js查找最新稳定版本，如8.11.1

nvm install 8.11.1

根据提示，使用某个版本的node，如8.11.1

nvm use 8.11.1

查看node和npm版本

node -v
npm -v

淘宝cnpm（GitHub - cnpm/cnpm: cnpm: npm client for China mirror of npm）

npm install cnpm -g --registry=https://registry.npm.taobao.org

4、安装Cordova

安装Cordova，官网地址：Apache Cordova

npm install -g cordova

【可选】安装某个版本的cordova，如8.0.0

npm install -g cordova@8.0.0

创建应用
通过cd命令进入某个文件夹，进行创建

cd /d C:\mapp\demo 
cordova create cordova com.my.demo 示例

进入文件夹

cd cordova

添加Android平台

cordova platform add android

【可选】添加某个版本的Android平台，如7.0.0

cordova platform add android@7.0.0

检查当前平台

cordova platform ls

检查需要的环境

cordova requirements

5、Android需求环境

（1）安装JDK，如jdk-8u191-windows-x64.exe
（2）安装Android Studio（需要科学上网），如android-studio-ide-181.5014246-windows.exe
（3）设置环境变量
① JAVA_HOME设为C:\Program Files\Java\jdk1.8.0_191
② ANDROID_HOME设为C:\Users\Administrator\AppData\Local\Android\Sdk
③ 将Android SDK的tools, tools/bin, platform-tools添加到Path

%ANDROID_HOME%\tools;%ANDROID_HOME%\tools\bin;%ANDROID_HOME%\platform-tools

（4）接受所有sdk license

sdkmanager --licenses

输入y
（5）配置Gradle

cordova run android -- --gradleArg=-PcdvMinSdkVersion=20

注：若未接受sdk license，过程中可能会出现如下错误信息：Warning: License for package Android SDK Platform 26 not accepted.

6、安装dva

npm install -g dva-cli

使用dva创建react项目

cd /d C:\mapp\demo
dva new react

7、安装antd-moblie

npm install antd-mobile --save

8、配置react项目输出路径

删除.webpackrc文件，添加demo\react.webpackrc.js文件，其中outputPath的输出路径为../cordova/www/

export default {
  entry: 'src/index.js',
  outputPath: '../cordova/www/',
  env: {
    development: {
      extraBabelPlugins: [
        'dva-hmr',
        ['import', { libraryName: 'antd-mobile', libraryDirectory: 'lib', style: true }],
      ],
      extraPostCSSPlugins: [],
    },
    production: {
      extraBabelPlugins: [
        ['import', { libraryName: 'antd-mobile', libraryDirectory: 'lib', style: true }],
      ],
      extraPostCSSPlugins: [],
    },
  },
};

9、调试及编译

编译并在真机运行

cd  cd /d C:\mapp\demo\react
npm run build

cd C:\mapp\demo\cordova
cordova run android

在Chrome中输入chrome://inspect/#devices，进行调试

10、常用命令说明：

react运行：npm start
react编译：npm run build
cordova运行：cordova run android
cordova编译：cordova build android

cordova安装/卸载

# 安装（注意：安装cordova不能用cnpm，否则创建项目会失败！！！）
npm install -g cordova
npm install -g cordova@8.0.0
npm install -g cordova@latest

# 卸载
npm uninstall -g cordova
删除C:\Users\Administrator\AppData\Roaming\nvm\v8.11.1\node_modules\cordova

添加/移除Android平台

# 添加
cordova platform add android
cordova platform add android@7.0.0

# 移除
cordova platform remove android

添加/移除Cordova插件

# 添加
cordova plugin add cordova-plugin-camera

# 移除
cordova plugin rm cordova-plugin-baidumaplocation

作者：gisxiaowei
链接：https://www.jianshu.com/p/a064f8cd1879
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。