node 8.16.2 + ionic 3.19.0 + cordova7.1.0 environment configuration
- background
- implement
-
- (1) Install ionic
- (2) Install cordova
- (3) Run the project ionic serve
-
-
- 1. Follow the prompts to reconstruct node-sass for node 8.
- 2. An error occurs
- 3. Follow the prompts to install vcbuild: run as administrator and open the command line tool. Run in command line tool
- 4. Reinstall node-sass
- 5. Installation successful
- 6. Run the project
-
- (4) Optimize eslint
- (5) Error: Without from option PostCSS could generate wrong source map and will not find Browserslist config.
- (6) Packaging error: Could not get resource https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-reflect/1.5
Background
The mobile project originally used node 6.9.1, but the web project used node 8.16.2. Switching versions caused unnecessary trouble.
Implementation
(1) Install ionic
npm install -g [email protected] ionic -v
(2) Install cordova
npm install -g [email protected] cordova -v
(3) Run the project ionic serve
An error occurs:
PS D:\ProjectFiles\WebStromProject\MESAPP1.4.3> ionic serve
Error: Missing binding D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-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\\
ode_modules\\
ode-sass\lib\binding.js:15:13)
at Object.<anonymous> (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-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.<anonymous> (D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\@ionic\app-scripts\dist\core\bundle-components.js:6:16)
1. Reconstruct node-sass suitable for node 8 according to the prompts
npm rebuild node-sass --force
2. An error occurs
MSBUILD : error MSB3428: Failed to load Visual C++ component 'VCBuild.exe'. To resolve this issue, 1) install the .NET Framework 2.0 SDK; 2) install Microsoft Visual Studio 2005; or 3) if the component is installed elsewhere, add its location to the system path. [D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass\build\bindin
g.sln]
Completed building project "D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass\build\binding.sln" (default target) - failed.
Build failed.
"D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass\build\binding.sln" (default target) (1) ->
(_src_\libsass target) ->
MSBUILD : error MSB3428: Failed to load Visual C++ component 'VCBuild.exe'. To resolve this issue, 1) install the .NET Framework 2.0 SDK; 2) install Microsoft Visual Studio 2005; or 3) if the component is installed elsewhere, add its location to the system path. [D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass\build\bind
ing.sln]
0 warnings
1 error
Elapsed time 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\\
ode_modules\\
ode-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\\
odejs\\
ode.exe" "D:\ProjectFiles\WebStromProject\MESAPP1.4.3\ \
ode_modules\\
ode-gyp\bin\
ode-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "- -libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-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\\
ode_modules\\
ode-sass
3. Follow the prompts to install vcbuild: run as administrator and open the command line tool. Run in command line tool
npm install –global –production windows-build-tools
4. Reinstall node-sass
npm rebuild node-sass --force
5. Installation successful
23 warnings
0 errors
Elapsed time 00:00:25.04
gyp info ok
Installed to D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass\vendor\win32-x64-57\binding.node
[email protected] D:\ProjectFiles\WebStromProject\MESAPP1.4.3\\
ode_modules\\
ode-sass
6. Run the project
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";
A large number of declared but unused variables appear
(4) Optimize eslint
{
"rules": {
"no-duplicate-variable": true,
"no-unused-variable": false,//Change true to 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,
// The complexity of a function does not exceed 10. All branches, loops, and callbacks added together do not exceed 10 in a function.
"complexity": [2, 10],
// The nesting of a function cannot exceed 4 levels, multiple for loops, and deep if-else, these are the source of evil.
"max-depth": [2, 4],
//A function can have up to 3 levels of callbacks, using async/await
"max-nested-callbacks": [2, 3],
//A function can have up to 5 parameters. A function with too many parameters means that the function is too complex, please split it
"max-params": [2, 5],
//A function can have up to 50 lines of code. If it exceeds, please split it or simplify it.
"max-statements": [2, 50],
// Firm semicolon-less advocate
"semi": [2, "never"]
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
(5) Error: Without from option PostCSS could generate wrong source map and will not find Browserslist config.
In the “sass.js” file in the “/node_modules/@ionic/app-scripts/dist/sass.js” path, add “from: undefined” to the postcssOptions parameter. The effect after adding is as follows:
var postcssOptions = {
from: undefined, //newly added
to: path_1.basename(sassConfig.outFile),
map: autoPrefixerMapOptions
};
(6) Packaging error: Could not get resource https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-reflect/1.5
Modify build.gradle
repositories {
// mavenCentral()
//jcenter()
//Add the following images
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
}