白嫖源码时,经常可以看见这玩意。

如果你逛 github 白嫖源码时没看到过 nmp,说明你用不到这部分知识,不用看下文了,退出吧。

我以前看过一些不错的源码,作者提供了使用方法,甩给我一个 nmp 开头的代码。但是对我这种一点代码不懂的小白来说,完全就是天书。

我也能理解作者,对门外汉是天书,对业内人来说就是基础知识,他们没想过服务小白只当是业内交流。

终于在今天,我懂了这是啥意思,只是一些常规步骤罢了。

实例

前言:本实例在宝塔面板里完成,我的服务器是 Centos 系统。CentOS、Debian、Ubuntu 都行。

这是一个 导航源码 ,以前由于涉及到 nmp,所以不会安装,但今天我安装好了。假设我们希望通过 dh.rzfyu.com 来访问这个源码的网页。

作者在源码文章的下面给出了这个:

使用
# install dependencies
npm install

# serve with hot reload at localhost:8080 /非鱼注释:这是在本地运行的意思/
npm run dev

# build for production with minification
npm run build

小白面对它当然看不懂,而且作者由于只考虑到了业内分享,有些东西直接省略了。

第一步

打开宝塔面板 - 文件,打开域名文件夹,例如 /www/wwwroot/dh.rzfyu.com,新建那一行右边有一个终端,点它。你会看到这个东西:(它被称之为终端窗口,黑乎乎的)

[root@VM_0_12_centos ~]# cd /www/wwwroot/dh.rzfyu.com
[root@VM_0_12_centos dh.rzfyu.com]# 

下面就要安装 npm 等依赖了。(这句看不懂无所谓,你就理解为下面我们要开始复制粘贴了)


#Ubuntu系统
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs git screen

#Debian系统
curl -sL https://deb.nodesource.com/setup_9.x | bash -
apt-get install -y nodejs git screen

#Centos系统
curl -sL https://rpm.nodesource.com/setup_9.x | bash -
yum install nodejs -y git screen

我是 Centos 系统,所以就把对应的代码复制粘贴到终端里,变成这样:(这里要强调下,复制粘贴在宝塔里只能用鼠标右键,不能用快捷键)

[root@VM_0_12_centos ~]# cd /www/wwwroot/dh.rzfyu.com
[root@VM_0_12_centos dh.rzfyu.com]# curl -sL https://rpm.nodesource.com/setup_9.x | bash -
yum install nodejs -y git screen

直接回车,让它自动运行

第一次出现这个,然后自动会运行:Continuing in 20 seconds ...( 20 秒后开始运行)

等光标一闪一闪,会出现这个,再回车一下这是在跑第二个东西的意思:[root@VM_0_12_centos dh.rzfyu.com]# yum install nodejs -y git screen

又出现了一个东西,说明跑完了 [root@VM_0_12_centos dh.rzfyu.com]#

你就注意看末尾有没有「完成」的英文显示,看不懂英文复制到翻译软件里翻译呗。

至此,这个叫做「安装环境」的步骤就完成了。

第二步

下载源码并安装。(听不懂无所谓,依然理解为复制粘贴)

git clone https://github.com/iiiiiii1/opage
cd opage && npm install

理论上要把上面的代码,直接复制粘贴在 [root@VM_0_12_centos dh.rzfyu.com]# 的后面,但实际上,由于国内网络的问题,这么干并不行。

所以这个代码要改一下,变成下面这样:(其实就是用国内镜像网站下载,Github 国内镜像网站有github.com.cnpmjs.org或者git.sdut.me

git clone https://github.com.cnpmjs.org/iiiiiii1/opage
cd opage && npm install

复制粘贴几秒后会出现这个,然后回车:[root@VM_0_12_centos dh.rzfyu.com]# cd opage && npm install

下载完后,出现 [root@VM_0_12_centos opage]# 在后面输入下面的代码回车:

screen -S opage
npm run dev

现在出现的是一个可以滚动的页面(动动鼠标滚滚看),滚动到 npm run dev[root@VM_0_12_centnpm run dev 回车(其实这步骤是错的是多余的,既然是错的为什么还要说呢,因为记录错误才不会犯错。)

现在依然是可以滚动的页面,我们滚动到 [root@VM_0_12_centos opage]# npm run build 回车

它会自动运行,结束时有几行绿色的代码,最下面是 [root@VM_0_12_centos opage]#

到此就结束了。

终端关了,刷新一下页面,进入到 opage - dist 文件夹里,把里面的全部东西复制到域名根目录,再访问 dh.rzfyu.com 就可以访问源码的页面了。

总结

其实以上的所有步骤,应该叫做「编译」。

我们碰到的大多源码是别人编译好的,直接就可以用。这种需要 npm,就要自己去编译,编译好之后就和其他源码一样了。

当然这里只考虑单页源码,因为其他的我并不懂。

记录这个方法是想用这个案例举一反三,以后再碰到 nmp 就知道是怎么回事了。

实例二

通过实例一,我们大概知道是怎么回事了。今天我遇到了另一个喜欢的 源码 ,举一反三把它实现吧。

原作者给的安装教程:

克隆项目到本地:
git clone https://github.com/maruko0713/TODO_APPLICATION.git todo_application

进入项目:
cd todo_application

安装依赖:
npm install

然后就可以在地址栏里输入 index 文件地址访问了。

我的教程:

假设我们希望访问 hao.rzfyu.com/todo/ 时进入这个源码的页面。

第一步:打开宝塔面板,进入 hao.rzfyu.com 的根目录,防止乱了新建一个 todo 文件夹,并进入。

第二步:打开终端,复制粘贴镜像后的代码 git clone https://github.com.cnpmjs.org/maruko0713/TODO_APPLICATION.git todo_application 回车。

第三步:复制粘贴 cd todo_application 回车,进入上一步下载完的名为 todo_application 的文件夹。

第四步:复制粘贴 npm install 回车,安装这玩意,具体原理我也不懂。

第五步:关闭终端,刷新当前页面,进入 todo_application 文件夹,把里面的东西全复制粘贴在 todo 目录下

第六步:访问 hao.rzfyu.com/todo/ 时就可以打开页面了。

第七步:把用不到的文件删掉,能用免费 cdn 的就替换掉引用链接。(这一步看不懂就不做,反正不是必要步骤)

小结:

感觉实例二比实例一少了很多环节和东西,因为实例二本来就是个小项目,用到的东西少,而且没有实例一「安装环境」的步骤。

另外实例一要不要真的安装环境,我也不确定,
因为我发现宝塔面板 - 软件商店 - 运行环境里有一个叫做「PM2管理器」的东西,安装它后好像就可以替代实例一中「安装环境」的步骤,但是我并没有实际去测试,不确定。

但明确的是即使可以替代,案例一中「安装环境」的步骤并不是错的,因为有些大佬并不安装宝塔面板,直接在终端里啃代码,此时就用到了那个步骤。

其实懂的多了,我发现在终端里啃代码也并不难啊,难道我也要进化了。