前端培训-中级阶段(45)- Node10.x环境搭建,NPM包管理器

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。上节课我们了解到了一个可以在本地执行 js 的 javascript 执行环境:NodeJS。今天我们来安装 NodeJS、环境配置、NPM 使用、版本管理。推荐使用 node 10.x 版本(2018年,最新是 10.22.1),下文我们基于 v10.16.0 版本。

bVbO8v5.webp.jpg

23.png


安装 NodeJS



用软件就要安装


windows


windows 装软件就是选择一个适合版本,然后下载双击打开,无脑下一步即可。


  1. node-v12.18.4-x86.msi 32 位
  2. node-v10.22.1-x64.msi 64 位


linux


  1. 包管理工具。一般装的版本都不行,可以再修改一下版本


sudo apt-get install nodejs
sudo apt-get install npm


2.源码编译。操作起来很费事


sudo git clone https://github.com/nodejs/node.git
sudo chmod -R 755 node
cd node
sudo ./configure
sudo make
sudo make install


3.使用已编译好的包。


wget https://nodejs.org/dist/v10.22.1/node-v10.22.1-linux-x64.tar.xz    
tar xf  node-v10.9.0-linux-x64.tar.xz
cd node-v10.9.0-linux-x64
./bin/node -v


macOS


因为穷,所以我没有 mac。从网上扣一个吧。


你可以通过以下两种方式在 Mac OS 上来安装 node:

  • 1、在官方下载网站下载 pkg 安装包,直接点击安装即可。
  • 2、使用 brew 命令来安装:brew install node

环境配置



环境变量是为了方便执行的时候找到对应的程序,不然的话只能每次使用的时候先手动找到文件,然后再使用。


windows 环境变量


默认配置:1. C:\Windows\system32;C:\Windows

cmd 命令提示行中输入 path 可以查看当前的配置。


不过我一般是通过界面的方式设置:我的电脑(右键), 属性,高级系统设置,高级,环境变量,然后给当前用户修改 PATH


linux 环境变量


默认配置:


PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"


linux 一般是直接使用软连的方式,放入 /usr/local/bin 中。


ln -s /usr/software/nodejs/bin/npm /usr/local/bin/ 
ln -s /usr/software/nodejs/bin/node /usr/local/bin/


NPM



NPM 是随同 NodeJS 一起安装的包管理工具


NPM 的安装


由于 nodejs 已经集成了 npm,所以之前 npm 也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。

24.png


package.json 和 npm init


package.json 位于模块的目录下,用于定义包的属性:


  • name 包名


  • version 版本号


  • description 描述


  • main 入口文件 。指定程序的主入口文件,require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。


  • scripts 快捷命令


  • keywords 关键词


  • author 作者


  • license 开源协议


  • 依赖(开发时 devDependencies、运行时 dependencies)。


  • homepage 包的官网 url 。


  • contributors 包的其他贡献者姓名。


  • repository 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。


我们可以通过 npm init 交互式的创建 package.json 文件。


也可以通过 npm init -y 快捷的创建, -y 意思是所有选择都选 Yes。


{
  "name": "node-sf-20200922",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "'linong' <'lilnong1@126.com'> ('')",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}


npm 包管理


npm install <package> 用于安装包,安装分为两种:


  • 本地安装(local)。安装之后放在了工程目录下的 node_modules 目录中,代码中只需要通过 require('express') 就可以使用。


  • 全局安装(global)。将安装包放在你 node 的安装目录。


npm uninstall <package> 卸载 Node.js 模块


npm update <package> 更新 Node.js 模块


npm install <package> # 本地安装 
npm install <package> -g # 全局安装


npm install、npm install --save、npm install --save-dev


来个题 npm installnpm install --savenpm install --save-dev 有什么不同?


  1. npm install <package>: 安装模块到项目目录下


a.安装模块到项目 node_modules 目录下。


b.不会修改 package.json 文件。


c.运行 npm install 初始化项目时不会下载模块。


2.npm install <package> -g-g将模块安装到全局,具体安装到磁盘哪个位置,要看npm config prefix的位置。查看:npm config ls,修改:npm config set prefix.


a.安装模块到全局,不会在项目node_modules目录中保存模块包。


b.不会修改package.json文件。


c.运行 npm install 初始化项目时不会下载模块。


3.npm install <package> --save:(简写:-S)-save将模块安装到项目目录下,并在 package 文件的 dependencies 属性写入依赖。


a.安装模块到项目 node_modules 目录下。


b.会在 package.json 文件的 dependencies 属性将模块依赖写入.


c.运行 npm install 初始化项目时,会将模块下载到项目目录下。


d.运行 npm install --production 或者注明 NODE_ENV 变量值为 production 时,会自动下载模块到 node_modules 目录中。


4.npm install <package> --save-dev:(简写:-D)-save-dev将模块安装到项目目录下,并在package.json文件的devDependencies属性写入依赖。


a.安装模块到项目 node_modules 目录下。


b.会在package.json文件的 devDependencies 属性将模块依赖写入。


c.运行 npm install 初始化项目时,会将模块下载到项目目录下。


d.运行 npm install --production 或者注明 NODE_ENV 变量值为 production 时,不会自动下载模块到node_modules目录中。


使用原则:运行时需要用到的包使用 --save,否则使用 --save-dev


devDependencies 属性下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩css、js的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。


express 这些模块是项目运行必备的,应该安装在 dependencies 属性下,所以我们应该使用 -save 的形式安装。


npm 版本号


使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码,这里简单介绍一下。


语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。


  • 如果只是修复bug,需要更新Z位。


  • 如果是新增了功能,但是向下兼容,需要更新Y位。


  • 如果有大变动,向下不兼容,需要更新X位。


版本号有了这个保证后,在申明第三方包依赖时,除了可依赖于一个固定版本号外,还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。


NPM支持的所有版本号范围指定方式可以查看官方文档


其他命令


  • 使用npm cache clear可以清空NPM本地缓存,用于对付使用相同版本号发布新版本代码的人。


  • npm install -g cnpm --registry=https://registry.npm.taobao.org 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm


  • npm search express 搜索模块


  • npm list -g 查看所有全局安装的模块


NodeJS 版本管理



写前端的时候我们头疼的是用户用一些奇奇挂怪的浏览器,写 Node 的时候也有头疼的不同的包依赖不同的版本。所以这就要求我们可以切换版本,至少要求我们首次使用的时候可以快速的找到合适的版本(我推荐 10.x 版本,我用着还可以)。


windows 安装还好,从习惯上来讲都是下载、双击、无脑下一步。


linux 就有点头疼了,命令下载、解压、安装、配置环境变量(或者软连到 /usr/bin 下面)。


n


n 是交互式 node.js 版本管理工具。


npm install n -g #安装n
n lts  #安装最新版
n stable #安装稳定版
n #切换版本
n rm  #删除版本


nvm


nvm 也是 Node 版本管理工具。


下载安装


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash


命令


nvm install node # 安装最新版本,node 是最新版本的别名
nvm install 6.14.4 # 安装特定版本
nvm ls-remote # 列出可用版本
nvm use node # 选择使用的版本


相关文章
|
12月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
1176 9
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
12817 23
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
1120 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
JavaScript
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
3330 27
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
457 3
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
|
JavaScript 算法 前端开发
nodejs18版本 npm run dev失败
在使用若依框架运行 `npm run dev` 时,若卡在 95% 并报错,通常是 Node.js 17+ 与 Webpack 的兼容性问题。原因是 OpenSSL 3 的加密算法变化导致依赖冲突。解决方法:Windows 下运行 `set NODE_OPTIONS=--openssl-legacy-provider`,macOS/Linux 使用 `export NODE_OPTIONS=--openssl-legacy-provider`,然后重新启动开发服务即可。此设置让 Node.js 启用旧版加密支持,恢复正常构建流程。
1210 0
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
392 10
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
1938 5
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
14003 2
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
485 0

推荐镜像

更多
  • NPM