时隔5年重拾前端开发，却倒在了环境搭建上

蔚落 2024-04-25 08:33 4阅读 0赞

## 背景 ##

去年不是降本增“笑”，“裁员”广进来着吗，公司有个项目因此停止了，最近又说这个项目还是很有必要的，就又重新启动这个项目了，然后让我这个“大聪明”把环境重新跑起来。让我无奈的是，原项目的团队成员都已经被增“笑”了，只留下了一堆不知从哪开始着手的文档。

后端还好，前端我心里就犯嘀咕了，毕竟已经5年没有关注过前端了，上次写前端代码用的还是一个基于Angular构建的移动框架inoic，不知道大家用过没有。

好在这个项目前端也用的Angular框架，本以为整个过程会很顺利，然而，结果总是事与愿违。果不其然，在搭建前端开发环境时就给我上了一课，整个过程让我抓耳挠腮，遂特此记录。

## 环境搭建心路历程 ##

### 跟着文档操作 ###

前端文档中对环境搭建有进行说明，一共有4个步骤，大概是这样的：

1.  **确认node环境，需要某个及以上版本。**
2.  **安装@angular/cli。**
3.  **安装依赖。**
4.  **启动项目。**

看到这里，我第一反应是“啊？现在前端这么麻烦的吗？”，我记得以前在浏览器直接打开页面就可以访问了。咱也不懂，跟着说明操作就行。

1.  我本地不知道啥时候装了nodejs，执行node -v后输出v18.13.0，符合要求。ok
2.  @angular/cli这是啥，咋也不懂，执行安装命令就行，输出看上去是没有问题。ok
3.  安装依赖我理解跟Maven的依赖管理一样，先不管，执行。ok
4.  到这一步，我觉得应该可以顺利启动，看一看这个项目的庐山真面目了，结果执行 npm start 后报下面这个错。

### 出现问题一：nodeJS版本过高 ###

Error: error:0308010C:digital envelope routines::unsupported
    ......
    ......
    
    {
        
    	'opensslErrorStack': [ 'error:03000086:digital envelope routines::initialization error' ],
    	'library': 'digital envelope routines',
    	'reason': 'unsupported',
    	'code': 'ERR_OSSL_EVP_UNSUPPORTED'
    }
    ......
    ......

百度一看，原因是node 17版本之后，OpenSSL3.0对算法和密钥大小增加了严格的限制。

解决呗，降版本呗，[node官网][node] 下载了v14.12.0。

### 出现问题二：nodeJS版本低于Angular CLI版本 ###

降版本之后重新运行`npm start`，您猜猜怎么着

![在这里插入图片描述][9658b2a98b744633a667e2c7ca714b9e.png]

Node.js version v14.12.0 detected.
    The Angular CLI requires a minimum Node.js version of v18.13.
    
    Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

很明显，新老版本冲突了，又是版本问题，又是一顿百度之后，发现知乎上的一个[帖子][Link 1]跟我这问题现象是一样的：“**node是最新版，npm启动项目使用的不是最新版的node，请问这个怎么解决？**”

跟着下面的评论又安装了nvm（Node Version Manager），最后一顿操作后，莫名其妙的启动了。

事后才反应过来，这个问题的根本原因是：**Angular CLI是在node版本为18.3时安装的，版本更新到14.12.0后需要删除依赖重新安装。**

但是我不确定的是对应的 n p m 版本会不会一同更新，有知道的小伙伴评论区交流一下。 \\color\{blue\}\{但是我不确定的是对应的npm版本会不会一同更新，有知道的小伙伴评论区交流一下。\} 但是我不确定的是对应的npm版本会不会一同更新，有知道的小伙伴评论区交流一下。

不过nvm确实好用，至少不用担心node和npm版本问题，比如下面的命令：

[xxx % ] nvm use --delete-prefix v18.13.0
    Now using node v18.13.0 (npm v8.19.3)

### 学到的第一个知识：nvm ###

这里记录下nvm安装过程

1.  clone this repo in the root of your user profile
    
     *  cd ~/ from anywhere then git clone https://github.com/nvm-sh/nvm.git .nvm
2.  cd ~/.nvm and check out the latest version with git checkout v0.39.7
3.  activate nvm by sourcing it from your shell: . ./nvm.sh

配置环境变量

export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

## 引发的思考 ##

### 技术发展日新月异 ###

早在几年前，程序员是要前后端一起开发的，不分什么前后端，我从最开始的HTML、JavaScript开始用到AngularJS这些框架，印象最深刻的是还要解决兼容IE浏览器。没想到现在的前端也会有版本管理、组件化等等，可见技术更新迭代速度之快。

### 前端的重要性 ###

当初在选择后端的时候认为前端技术无非就那些，没有什么挑战。事实上，前后端没有分离之前，市场上的应用页面也是极其简洁的，前后端一起兼顾是没有精力写出那么好看的界面和交互的。所以“前端已死”的观点我是不认可的。

### 降本增“笑”被迫全栈 ###

前几天参加了开发者社区的线下聚会，聊了一下行情。有小伙伴吐槽，因为在降本增“笑”的原因，现在他们被公司要求要写前端，被迫向全栈发展，竟意外发现开发效率极其高。还有小伙伴说“前端被裁的剩下几个人，一个前端对接十个后端。”。是呀，在降本增“笑”之后，老板恨不得让一个人干十个人的活。

### 与时俱进 ###

不论是几年前的前后端分离还是降本增“笑”带来的被迫全栈，还是最近“前端已死”的观点，一切都是行业发展所需要的。我们需要做到的是：不断学习和更新自己的知识和技能，以适应行业的发展和变化。

[node]: https://nodejs.org/en/
[9658b2a98b744633a667e2c7ca714b9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f315aeb1285a48a7bd3e510016402cf6.png
[Link 1]: https://www.zhihu.com/question/631114770