从node 6.9.1升级到node 8.16.2+ ionic 3.19.0 + cordova7.1.0环境配置

背景

移动端项目原本使用node 6.9.1，但web端使用 node 8.16.2，切换版本造成不必要的麻烦

实施

（1）安装ionic

npm install -g [email protected]
ionic -v

（2）安装cordova

npm install -g [email protected]
cordova -v

（3）运行项目ionic serve

出现报错：

PS D:\ProjectFiles\WebStromProject\MESAPP1.4.3> ionic serve
Error: Missing binding D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 6.x
  - OS X 64-bit with Unsupported runtime (72)
  - Windows 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\lib\binding.js:15:13)
    at Object. (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\@ionic\app-scripts\dist\core\bundle-components.js:6:16)

1、根据提示重新构造适用于 node 8 的node-sass

npm rebuild node-sass --force

2、出现报错

MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Studio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。 [D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\build\bindin
g.sln]
已完成生成项目“D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\build\binding.sln”(默认目标)的操作 - 失败。


生成失败。

“D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\build\binding.sln”(默认目标) (1) ->
(_src_\libsass 目标) ->
  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Studio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。 [D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\build\bind
ing.sln]

    0 个警告
    1 个错误

已用时间 00:00:00.40
gyp ERR! build error 
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Windows_NT 10.0.22621
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\ProjectFiles\\WebStromProject\\MESAPP1.4.3\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass
gyp ERR! node -v v8.16.2
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
[email protected] D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass

3、根据提示安装vcbuild：以管理员身份运行 并打开命令行工具。在命令行工具中运行

npm install –global –production windows-build-tools 

4、重新安装node-sass

npm rebuild node-sass --force

5、安装成功

    23 个警告
    0 个错误

已用时间 00:00:25.04
gyp info ok 
Installed to D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass\vendor\win32-x64-57\binding.node
[email protected] D:\ProjectFiles\WebStromProject\MESAPP1.4.3\node_modules\node-sass

6、运行项目

PS D:\ProjectFiles\WebStromProject\MESAPP1.4.3> ionic serve                  
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser -
Ctrl+C to cancel
[10:45:57]  watch started ... 
[10:45:57]  build dev started ...
[10:45:57]  clean started ... 
[10:45:57]  clean finished in 27 ms 
[10:45:57]  copy started ...
[10:45:58]  deeplinks started ... 
[10:45:58]  deeplinks finished in 267 ms 
[10:45:58]  transpile started ...
[10:46:02]  transpile finished in 3.68 s 
[10:46:02]  preprocess started ...
[10:46:02]  preprocess finished in 1 ms
[10:46:02]  webpack started ...
[10:46:03]  copy finished in 5.98 s 
[10:46:07]  webpack finished in 5.23 s 
[10:46:07]  sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[10:46:08]  sass finished in 1.07 s 
[10:46:08]  postprocess started ...
[10:46:08]  postprocess finished in 18 ms 
[10:46:08]  lint started ...
[10:46:08]  build dev finished in 11.02 s 
[10:46:09]  watch ready in 11.51 s 
[10:46:09]  dev server running: http://localhost:8100/ 

[OK] Development server running!
     Local: http://localhost:8100
     External: http://172.28.33.98:8100
     DevApp: hg-client-app@8100 on Chou

[10:46:14]  tslint: D:/ProjectFiles/WebStromProject/MESAPP1.4.3/src/app/app.component.ts, line: 15 
            'baidumap_location' is declared but never used.

      L14:  import { ToastController } from 'ionic-angular';
      L15:  declare const baidumap_location: any;
      L16:  declare var BaseStation: any;

[10:46:14]  tslint: D:/ProjectFiles/WebStromProject/MESAPP1.4.3/src/app/app.component.ts, line: 12
            All imports are unused.

      L11:  import { ScreenOrientation } from '@ionic-native/screen-orientation';
      L12:  import { AppConfig } from './app-config';
      L13:  import { File } from '@ionic-native/file';

[10:46:14]  tslint: D:/ProjectFiles/WebStromProject/MESAPP1.4.3/src/providers/http/http.ts, line: 8
            All imports are unused.

       L7:  import { SqliteProvider } from '../sqlite/sqlite';
       L8:  import { AppConfig } from '../../app/app-config';
       L9:  import { HttpClient, HttpHeaders } from "@angular/common/http";

出现大量声明但未使用的变量

（4）优化eslint

{
  "rules": {
    "no-duplicate-variable": true,
    "no-unused-variable": false,//将ture改为false
    "class-name": true,
    "curly": false,
    "eofline": true,
    "indent": "spaces",
    "max-line-length": [true, 140],
    "member-ordering": [true,
      "public-before-private",
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-construct": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "one-line": [true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [false, "double"],
    "semicolon": true,
    "triple-equals": true,
    "variable-name": false,
    // 一个函数的复杂性不超过 10，所有分支、循环、回调加在一起，在一个函数里不超过 10 个
    "complexity": [2, 10],
    // 一个函数的嵌套不能超过 4 层，多个 for 循环，深层的 if-else，这些都是罪恶之源
    "max-depth": [2, 4],
    // 一个函数最多有 3 层 callback，使用 async/await
    "max-nested-callbacks": [2, 3],
    // 一个函数最多 5 个参数。参数太多的函数，意味着函数功能过于复杂，请拆分
    "max-params": [2, 5],
    // 一个函数最多有 50 行代码，如果超过了，请拆分之，或者精简之
    "max-statements": [2, 50],
    // 坚定的 semicolon-less 拥护者
    "semi": [2, "never"]
  },
  "rulesDirectory": [
    "node_modules/tslint-eslint-rules/dist/rules"
  ]
}

（5）报错：Without from option PostCSS could generate wrong source map and will not find Browserslist config.

在“/node_modules/@ionic/app-scripts/dist/sass.js”路径的“sass.js”文件，在postcssOptions参数中添加“from: undefined”。添加后效果如下：

        var postcssOptions = {
            from: undefined,  //新添加
            to: path_1.basename(sassConfig.outFile),
            map: autoPrefixerMapOptions
        };

（6）打包报错：Could not get resource ‘https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-reflect/1.5

修改build.gradle

    repositories {
//         mavenCentral()
//         jcenter()
//         增加以下镜像
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' } //gradle-plugin
        maven { url 'https://maven.aliyun.com/repository/google' } //google
        maven { url 'https://maven.aliyun.com/repository/public' } //public
        maven { url 'https://maven.aliyun.com/repository/jcenter'} //jcenter
    }