NPM学习

最新推荐文章于 2024-06-13 14:44:41 发布

cherry有点甜·

最新推荐文章于 2024-06-13 14:44:41 发布

阅读量453

点赞数

分类专栏： npm 文章标签： npm 前端

本文链接：https://blog.csdn.net/m0_49382941/article/details/122038949

版权

npm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

NPM

认识npm

npm(全称Node Package Manager，即node包管理器)
是Node.js默认的、以JS编写的软件包管理器
npm来分享和使用代码已成前端的标配。
官网：https://www.npmjs.com
npm被全球超过1100万开发人员所依赖
拥有超过一百万个软件包，是世界上最大的软件注册表
cmd.exe里运行命令

npm中文网

包：https://www.npmjs.com/
文档：https://www.npmjs.cn/

安装NPM工具

npm是Node.js默认的软件包管理系统
安装完毕node后，会默认安装好npm
npm本身也是基于Node.js开发软件
下载Node：http://nodejs.cn

node -v
npm -v
npm install npm -g // 全局安装
npm install jquery //在工程目录下安装

国外网站下载速度慢，使用国内阿里的镜像加快速度
从配置文件里注册表

npm config get registry

设置配置文件注册表是阿里镜像：??

npm config set registry https://registry.npm.taobao.org/ -g
npm config set disturl https://registry.npm.taobao.org/ -g

使用nrm工具切换淘宝源

npx nrm use taobao

设置默认的地址：

npm config set registry https://registry.npmjs.org/

定义npm是默认配置，cnpm是淘宝镜像

npm install -g cnpm --registry-https://registry.npm.taobao.org

NPM基本使用

npm -v

通过查看版本，看npm 是否安装成功

npm install <module name>

使用npm 命令安装模块

npm install <module name>

-g 可以直接在命令行里使用

npm list -g

查看所有全局安装的模块

npm list vue

查看某个模块的版本号

npm -g install npm@5.9.1

(@后跟版本号)这样我们就可以更新npm版本

npm install moduleName --save

#-save在package文件的dependencies节点写入依赖

npm install modelueName --save-dev

#-save-dev在package文件夹的devDependencies节点写入依赖dependencies:运行时的依赖，发布后，及生产环境下还需要用的模块
devDependencies:开发时的依赖。里面的模块时开发时用的，发布时用不到它，比如项目中使用的guip，压缩css、js的模块。这些模块在我们的项目部署后是不需要的。

npm update <module name>

更新包到最新版本

npm uninstall <module name>

卸载包

package.json文件属性详解

生成package.json文件

npm init --yes //忽略选项
npm init //一步一步设置

写入自定义hello命令

{
  "name": "packagename",
  "version": "1.0.1",
  "description": "this is description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "node -v"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "author": "fxr",
  "license": "ISC"
}

执行自定义命令

npm run hello

安装jquery

npm install jquery -save

package-lock.json文件里开发依赖

{
  "name": "packagename",
  "version": "1.0.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "packagename",
      "version": "1.0.1",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.6.0"
      }
    },
    "node_modules/jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/download/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  },
  "dependencies": {
    "jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/download/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  }
}

版本号配置

3.2.1 ，固定版本3
^3.x.x，更新最后俩位。
~3.2.x，更新最后一位。

实际开发中，module目录下无需传递，删除module目录下下载的包。另一台机器npm install 能够自动下载。不麻烦，并且减少传输大小。再也不用担心因为容量大，需要传输几个小时。

{
  //包名
  "name": "packagename",  
  
   //包的版本号
  "version": "1.0.1",
  
   //包的描述
  "description": "this is description",
  
    //字段指定了程序的主入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的Index.js
  "main": "index.js",  

    // 命令可用 npm run test/...运行
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "node -v"
  },

   //包代码仓库的类型，可以git或svn,git可在Github上
  "repository": {
    "type": "git",
    "url": "git"
  },
   //作者
  "author": "fxr",
  
  "license": "ISC",
  
  //依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
  "dependencies": { 
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "bootstrap": "^5.1.3"
  }
}

homepage-包的官网url
contributors-包的其他贡献者姓名
keywords-关键字
package.json文件中版本号的说明，安装的时候代表不同的涵义：
“5.0.3” 表示安装指定的5.0.3版本
“~5.0.3” 表示安装5.0.x中最新的版本
“^5.0.3” 表示安装5.x.x中最新的版本

npm常用命令:
常看所有命令

npm help

查看某条命令的详细帮助

npm help install

在package.json目录下使用，可现在本地安装当前命令行程序，可用于发布前的本地测试

npm install . -g

可把当前目录下node_modules子目录里的模块更新到最新版本。

npm update <package>

可把全局安装的对应命令行程序更新到最新版本。

npm update <package> -g

清空npm本地缓存，用户对付使用相同版本发布新版本代码的人。

npm cash clear

撤销自己发布过的某个版本代码

npm unpublish <package>@<version>

NPM安装包的使用

想要运行代码，安装Code Runner插件
工程下新建foo.js

module.exports=100

工程下新建index.js

const $ = require('jquery')

let num = require("./foo.js");
console.log(num)

运行index.js文件

node index.js

暴露module.exports = …

module.exports = function(args){
    let sum =0;
    for(let i=0;i<args.length;i++){
        sum +=i;
    }
    return sum;
}

引入代码require(…)

const $ = require('jquery')

let num = require("./foo.js");
console.log(num([2,3,4]));

module.exports.sum = function(args){
    let sum = 0;
    for(let i=0;i<args.length;i++){
        sum += args[i];
    }
    return sum;
}

module.exports.num = 100;

let sum = require("./foo.js");
console.log(sum.sum([1,4,5]));
console.log(sum.num);

练习通过npm安装包来解决ES6语法兼容性问题

练习：ES6兼容性解决
ES6语法在老版本浏览器会报错。
兼容表：http://kangax.github.io/compat-table/es6/
IE10+、Chrome、FireFox、移动端、NodeJS现在都支持ES6
兼容低版本浏览器方式：
在线转换（缺点：加大页面渲染时间，响应蛮，半天刷新不过来）
提前编译（推荐方式，不影响浏览器渲染）

//ES6
var fn = (v=>console.log(v))
转换成
//ES5
“use strict”
var fn = function fn(v){
return console.log(v);
};
(工具有bable,jsx,traceur,es6-shim等。)

到静态资源库中版本复制地址

前端静态资源库：https://cdn.baomitu.com/

引入babel-core

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
    </head>
    <body>
        <script type="text/babel">
            const name = "学习"
            console.log(name);
            
        </script>
    </body>
</html>

1.使用NPM全局安装babel-cli包。
2.找一个目录，用npm来初始化一个项目，用来搭建我们的babel环境。（ npm init ）或（npm init -y）。
3.babel提供的一个编译工具babel-node，也可以执行我们的js代码（babel-node index.js）
4.在项目目录下新建.babelrc文件（这是babel的配置文件）
{
“presents”:[“es2015”,“stage-2”],//设置转码规则
“plugins”:[“transform-runtime”]//设置插件
}
5.需要转换成es2015，安装我们需要的库：

npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev

6.打开我们babel项目下的package.json文件，如下修改

"scripts":{"build":"babel src -w -d lib"}

7.编译整个src目录并将其输出到lib目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录，-w其实是-watch的意思，就是监听文件，实时编译输出。

8.新建src目录和lib目录，记得一定要建，不然会报错，然后启动babel工具
9.命令行输入npm run build

npm install --save-dev  babel-cli -g

查看babel版本

babel -V

NPM的竞品yarn的安装和使用

Yarn是什么？
yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。因为NPM5以下会出现下面的问题：
_ npm install的时候巨慢，特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
_同一个项目，多人开发时，由于安装的版本不一致出现bug
官网：www.yarnpkg.com

_ 下载node.js，使用npm安装

npm install -g yarn
查看版本：yarn --version

_ 安装node.js下载yarn的安装程序:
提供一个.msi文件，在运行时将引导您在Windows上安装Yarn
_Yarn淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm/taobao.org/dist/node-sass -g

初始化工程，生成package.json

yarn init

{
  "name": "prp",
  "version": "1.0.0",
  "description": "this is d",
  "main": "index.js",
  "author": "fxr",
  "license": "MIT",
}

添加包

yarn add <module name>

{
  "name": "prp",
  "version": "1.0.0",
  "description": "this is d",
  "main": "index.js",
  "author": "fxr",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

yarn remove jquery
yarn add jquery --dev

yarn官网

https://yarnpkg.com/

yarn的优点
速度快，安装版本统一，更简洁的输出，多注册来源处理，更好的语义化

npm install/ yarn
npm install react --save/yarn add react
npm uninstall react --save/yarn remove react
npm install react --save-dev/yarn add react --dev
npm update --save/yarn upgrade

cherry有点甜·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NPM学习

NPM认识npmnpm(全称Node Package Manager，即node包管理器)是Node.js默认的、以JS编写的软件包管理器npm来分享和使用代码已成前端的标配。官网：https://www.npmjs.comnpm被全球超过1100万开发人员所依赖拥有超过一百万个软件包，是世界上最大的软件注册表...
复制链接

扫一扫