Git、node、npm、webpack、yarn、脚手架是什么

Git

一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。详情

node

node.js是一种javascript的运行环境,能够使得javascript脱离浏览器运行
官网:http://nodejs.cn/
笔记

Node.js

js基础语法 + Node模块

Node模块

  • 内置模块(Node.js官方提供 fs ,path,http,…)
  • 自定义模块(用户创建的每个js文件,都是自定义模块)
  • 第三方模块(由第三方开发出来的模块,并非官方提供的内置模块)——包

直接体现在代码上的部分就是模块的引入和共享

引入模块方式

引入内置模块

var fs = require('fs');

共享模块方式

自定义模块中,可以使用module.exports对象,将模块内的成员共享出去,供外界使用
外界用require()导入自定义模块,得到的就是module.exports所指向的对象

由于module.exports单词写起来比较复杂,为了简化向外共享成员的代码,Node提供了exports对象
exports和module.exports指向同一个对象

exports.username = "zs";
exports.sayHello = function () {}

第三方模块(包)

第三方模块就是包,包还可以分项目包和全局包,这里就不过多描述
对包管理的工具就是npm

npm

所以npm就是个 包管理工具,换句话说就是 node第三方模块的管理工具。
这个包管理工具随着node的安装一起被安装到了用户的电脑上,主要使用命令,所以有node就可以直接使用命令

安装/下载 包

比如安装jQuery的命令:npm install jquery

初次装包完成,项目文件下多一个叫node_modules文件夹和package-lock.json和package-lock.json文件

node_modules 存放所有已安装到项目中的包 require导入第三方包时,就是从这个目录中查找并加载包
package-lock.json 配置文件用来记录node_modules目录下每一个包的下载信息,包的名字,版本号 下载地址
不需要手动修改这两个文件 npm包管理工具会自动维护它们

package.json

创建该文件的命令:npm init -y

npm规定,在项目目录中,必须提供一个叫做package.json的包管理配置文件,用来记录与项目有关的一些配置

  • 项目名称版本号 描述
  • 项目中都用到了哪些包
  • 哪些包只在开发期间用到
  • 哪些包在开发和部署时都需要用到

里面的东西大概是这样:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.26.1",
    "then-fs": "^2.0.0"
  },
  "devDependencies": {
    "less": "^4.1.2",
    "scss": "^0.2.4"
  }
}

devDependencies节点中的包,只在开发期间会用到
dependencies节点中的包,在开发期间和项目上线之后都会用到

yarn

快速、可靠、安全的依赖管理工具。和npm类似,都是包管理工具,可以用于下载包,比npm快
yarn需要用npm安装npm install --global yarn
命令对应表:

npm yarn
npm install yarn
npm install XXXX --save yarn add XXXX
npm uninstall XXXX --save yarn remove XXXX
npm install XXXX --save-dev yarn add XXXX --dev
npm update --save yarn upgrade

webpack

webpack是node的第三方模块包,用于打包代码
通过npm和yarn下载的包和webpack打的包是同一种东西
给个传送门

脚手架

vue脚手架
vue-cli快速搭建vue项目的,使用webpack管理项目
传送门

你可能感兴趣的:(学习,npm,webpack,git)