Elment UI

查看1.0版本

clone element项目，切换v1.0.0tag

//package.json
"bootstrap": "npm i",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js",
"dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",

npm run build:file 初始化文件，一个初始化icon、一个暴露组件（install与export）
cooking watch -c build/cooking.demo.js 饿了么构建工具cooking

已访问不了cookingjs.github.io/ 查看文档了，故不清楚cooking命令的具体意思了。

运行会疯狂报错

npm run dev

不了了之

查看2.0版本

//package.json
"bootstrap": "yarn || npm i",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
"dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p & node build/bin/template.js",
"dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",

build:file 运行文件基本没区别

运行一下

npm run dev
...报错
node-sass
gyp verb `which` failed Error: not found: python2

再运行dev:play

npm run dev:play
...报错
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)

继续v2.1.0

npm run dev:play
...报错
error E:\Code\Suni\element\node_modules\node-sass: Command failed.

试图解决

问题关键词: node-sass python2

stackoverflow 办法
1. delete node_modules folder
2. running npm install --global windows-build-tools
3. reinstalling node modules or node-sass with npm install

切回2.0 npm run dev 依旧报错

切换到webpack版本，依旧报错

研究报错

...
gyp verb check python checking for Python executable "python2" in the PATH
...
gyp verb ensuring that file exists: C:\Python27\python.exe

安装python2.7.18,配置环境变量Path（之前安装了Inkscape包含python3的环境配置，所以要删除或是改变先后顺序）

继续启动

npm run dev
...报错
gyp info spawn C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
...
MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。

安装Microsoft Visual C++ Build Tools 2015，执行npm config set msvs_version 2015，报错。

直接下载Framework2.0，提示安装了Framework3.5（包括了2、3版），设置环境变量Path

再次运行

npm run dev
...报错
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，
1) 安装 .NET Framework 2.0 SDK；
2) 安装 Microsoft Visual Studio 2005；或 
3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。

真是个大坑，但还是能意识到报错出现在node-sass里的node-gyp

从官方下手

element v2.0.0的node-sass版本为^4.5.3，node-sass 4.5.3的node-gyp版本为^3.3.1，找到node-gyp 3.3.1，看官方readme，按照要求继续安装

官方渠道安装Visual Studio Community 2015 Edition依旧出错（原因应该是没走代理，就算针对设置microsoft.com代理也还是会走直连）。

然后去找离线包Download Visual Studio 2015 (ISO / Offline Installer)

中途发现@花裤衩vue-element-admin也吐槽过node-sass对window用户不友好，虽然之前看到过这段话，但那时不能明白有多坑...）（也顺便发现之前我写【Vue 技巧】scoped 深度作用时，在scss中/deep/不管用的原因了，还一直以为我的写法不对）

安装，报错，见鬼

下狠手，移除node-sass，使用dart-sass(sass)

删除package.json的node-sass，全局搜索sass，找到gulp-sass相关文件gulpfile.js

npm uninstall node-sass
#npm install sass 报错
yarn add sass

//gulpfile.js
sass.compiler = require('sass');

还是在报node-sass的错？？？

哎。我图啥。

切回dev分支

找到node-gyp v3.8.0，继续操作。

无法从“v8::Local<v8::Value>”转换为“const v8::String:  :Utf8Value”

将node-sass版本从4.11改成4.12

终于可以了

心得

本身想的是从v1.0开始看，因为初始的版本逻辑会更单纯一点，易于理解。万万没想到，最后还是的在最新版上运行成功。但是可以切回去，把node-sass的版本号设置成现在的试一下。还好Element-Plus没有用node-sass了。果然一个项目，总是受历史最深的影响。

记一次element源码浏览记录（掉坑记录）