Для тех, кто, как и я, имеет несчастье работать по MS Windows.
NativeSPAExample, похоже, нормально разворачивается под !Windows, а остальным (sic!) предстоят пляски с бубном.
В этом воркфлоу будем решать проблемы по мере их возникновения. В цитатах логов будут пропущены фрагменты с сообщениями о нормальном течении процесса. Сообщения об ошибках и предупреждения будут пронумерованы для упрощения отсылки к ним.
Полезные ресурсы - в конце документа.
Windows 8.1 x64
На этом компе ранее разворачивалось число проектов достаточно большое для того, чтобы окружение оказалось насыщено
инструментами и приложениями под node
.
Attempt #1 осуществлялся на другом компе (Windows 10, x64) и успехом не завершился, несмотря на все усилия.
- Fork and clone NativeSPAExample
npm install
:
#1 npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
#2 npm WARN prefer global [email protected] should be installed with -g
...
#3 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
#4 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
#5 npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none was installed.
#6 npm WARN [email protected] No repository field.
Ошибок нет, только предупреждения. Проверим, окажется ли что-то критичным.
npm start
#1 ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
[0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
#2 webpack: Failed to compile.
Пока проигнорируем.
- navigate to http://localhost:3000/
(Номер порта мы знаем из
package.json
проекта).
Похоже, приложение работает, как и ожидалось.
Похоже, на текущей платформе окружение разработки оказалось достаточно подготовленным.
Windows 10 x64
- Fork and clone NativeSPAExample
npm install
:
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
> [email protected] install D:\prg\-external\NativeSPAExample\node_modules\node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
#1 Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":
HTTP error 404 Not Found
...
Building: D:\Program Files\nodejs\node.exe D:\prg\-external\NativeSPAExample\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
...
Building solution configuration "Release|x64".
Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (1) is building "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) on node 1 (default targets).
Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) is building "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (3) on node 1 (default targets).
D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: The imported project "D:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (default targets) -- FAILED.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (default targets) -- FAILED.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (default targets) -- FAILED.
#2 Build FAILED.
"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (default target) (1) ->
"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (default target) (2) ->
"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (default target) (3) ->
D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: The imported project "D:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
0 Warning(s)
1 Error(s)
Time Elapsed 00:00:00.52
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\12.0\bin\msbuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (D:\prg\-external\NativeSPAExample\node_modules\node-gyp\lib\build.js:258: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.16299
gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\prg\\-external\\NativeSPAExample\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\prg\-external\NativeSPAExample\node_modules\node-sass
gyp ERR! node -v v8.9.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN Error: EPERM: operation not permitted, scandir 'D:\prg\-external\NativeSPAExample\node_modules\scss-tokenizer\node_modules'
npm WARN { Error: EPERM: operation not permitted, scandir 'D:\prg\-external\NativeSPAExample\node_modules\scss-tokenizer\node_modules'
npm WARN stack: 'Error: EPERM: operation not permitted, scandir \'D:\\prg\\-external\\NativeSPAExample\\node_modules\\scss-tokenizer\\node_modules\'',
npm WARN errno: -4048,
npm WARN code: 'EPERM',
npm WARN syscall: 'scandir',
npm WARN path: 'D:\\prg\\-external\\NativeSPAExample\\node_modules\\scss-tokenizer\\node_modules' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Oleksiy\AppData\Roaming\npm-cache\_logs\2018-01-29T21_19_53_064Z-debug.log
Довольно много ошибок. Вижу две ключевых группы:
- #1: не удалось загрузить https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
- #2: не удалось сбилдить что-то важное
О #1 здесь говорят, что помогает npm i gulp-sass@latest --save-dev
. Пробуем.
npm i gulp-sass@latest --save-dev
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
> [email protected] install D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js
#3 Cached binary found at C:\Users\Oleksiy\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node
> [email protected] postinstall D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass
> node scripts/build.js
Binary found at D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
Плюс в package.json
появились новые записи:
{
...
"devDependencies": {
...
"babel-polyfill": "^6.23.0",
...
"extract-text-webpack-plugin": "^1.0.1",
...
"gulp-sass": "^3.1.0",
...
"webpack-dev-server": "^1.12.1"
},
...
}
Версии node-sass
в #1 и #3 заметно различаются. Попробуем найти компоненту для 3.13.1
- Navigate to https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
Таки 404
. Далее видим, что здесь
есть компоненты для версии 3.13.0
, а дальше сразу для `3.14.0-0'.
Пытаемся жить с тем, что есть, т.е. 4.7.2
Меняем в package.json
"node-sass": "^3.3.3",
"node-sass": "^4.7.2",
npm install
Ура! Были только ворнинги. С этим можно жить.
Проверяем работоспособность аппа.
npm start
...
ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
[0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.
Ошибки те же, что и в Attempt #2.
- Navigate to http://localhost:3000/
Приложение работает.
Попробуем решить проблему из шага #5:
- PowerShell as admin >
npm install --global --production windows-build-tools
...
Successfully installed Python 2.7
Successfully installed Visual Studio Build Tools.
+ [email protected]
...
Похоже, это была не лучшая идея, потому что теперь
npm start
> webpack-dev-server --config webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline
events.js:183
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 0.0.0.0:3000
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at Server.setupListenHandle [as _listen2] (net.js:1351:14)
at listenInCluster (net.js:1392:12)
at doListen (net.js:1501:7)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:678:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --config webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Oleksiy\AppData\Roaming\npm-cache\_logs\2018-01-29T22_06_32_838Z-debug.log
В package.json
убираем --host 0.0.0.0
в scripts.start
npm start
...
ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
[0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.
Опять ошибка и такая же, как в шаге #5 (a known issue). И приложение работает, при том.
Рискнём:
npm install
npm WARN [email protected] requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
Теперь внимательнее отнесёмся к ворнингам:
npm install npm install node-sass@^3.4.2 ; npm install stylelint@^6.0.1
....
- Open "Windows Defender Security Centre" by searching in start menu.
- Click on "Virus & threat protection" at left side pane.
- Click on "Virus & threat protection settings"
- Scroll down and Click on "Add or remove exclusions" under "Exclusions"
- Click on "Add an exclusion" Button then "Process"
- Enter process name: "node.exe" and click on "Add"
- DONE! Now Feel free to install any npm packages.
npm cache verify
I had this issue and it was to do with residual files for me. I ran
npm cache clean --force
and also deletedAppData\Roaming\npm-cache
folder.
Or upgrade:
On Windows 10 at least it's worth noting that if you're using 9.x (which I am on one machine) you may run into an issue where npm installed in AppData doesn't want to play nice with node 9 and update. You have to uninstall:
npm uninstall -g npm
Which will fall back to the one included in the nodejs install. Then you can install a new one:
npm install -g [email protected]
Or downgrade:
npm install -g [email protected]