zoukankan      html  css  js  c++  java
  • npm基本介绍及使用

    1.什么是npm

    npm全称node package manager,是node包管理和分发工具。可以理解为前端的maven。通过npm可以很方便的下载js库,管理前端工程。node已经集成npm工具,在cmd中输入npm -v查看当前npm版本。

    官网地址:https://www.npmjs.cn/

    2.npm命令

    2.1初始化工程

    init命令是工程初始化命令。建立一个空文件夹,cmd中输入

    npm init

    按照提示输入相关信息,如果是用默认值则直接回车即可。
    name: 项目名称
    version: 项目版本号
    description: 项目描述
    keywords: {Array}关键词,便于用户搜索到我们的项目
    最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml

    2.2本地安装

    install命令用于安装某个模块,若想安装express模块(node的web框架),输出命令为:

    npm install express

    在该目录下已经出现了一个node_modules文件夹 和package-lock.json文件。
    node_modules文件夹用于存放下载的js库(相当于maven的本地仓库);
    package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。
    我们再打开package.json文件,发现刚才下载的express已经添加到依赖列表中了.

    关于版本号定义:

    指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版
    本。
    波浪号(tilde)+指定版本:比如~1.2.2,表示安装1.2.x的最新版本(不低于1.2.2),但
    是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。
    插入号(caret)+指定版本:比如ˆ1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但
    是不安装2.x.x,也就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插
    入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。
    latest:安装最新版本。

    2.3全局安装

    本地安装会将js库安装在当前目录,而使用全局安装会将库安装到全局目录下。全局目录的路径可以修改,修改详情请自行百度。

    查看全局目录路径:

    npm root -g

    若全局安装vue:

    npm install vue -g

    2.4批量下载

    若从网上下载源码时,只有package.json,没有node_modules文件夹,可以通过install命令重新下载所依赖的js库。

    进入package.json所在的目录,输入命令:

    npm install

    npm会自动下载package.json中依赖的js库

    2.5淘宝npm镜像

    使用npm下载资源很慢,可以安装cnmp(淘宝镜像)来加快下载速度。

    cmd中输入命令,全局安装cnmp:

    npm install ‐g cnpm ‐‐registry=https://registry.npm.taobao.org

    查看cnpm版本:

    cnpm -v

    使用cnpm:

    cnpm install 需要下载的js库

    2.6运行工程

    若想运行某个工程,使用run命令。

    若package.json中定义的脚本为:

    dev是开发阶段测试运行
    build是构建编译工程
    lint 是运行js代码检测

    运行dev:

    npm run dev

    2.7编译工程

    代码编译后就可以将工程部署到nginx中了,编译后的代码会放在dist文件夹中。

    编译命令:实质是底层调用webpack命令来实现打包的

    npm run build

    编译后可以看到dist文件夹中只有静态页面和一个static文件夹,这种工程称之为单页web应用(single page web application,SPA),就是只有一张web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

  • 相关阅读:
    CSS中的外边距合并问题
    Web性能优化的途径
    HTML5读书笔记——canvas元素(续)
    HTML5读书笔记——canvas元素
    2016/9/8日志
    【每日一醒】【架构师之路】设计文档之惑
    华为是个好公司,但不全是好员工——记初次压力面试的体验
    忐忑的一天,心里还是小兴奋的
    atexit()函数
    年终心结,心绪的总结!
  • 原文地址:https://www.cnblogs.com/itzlg/p/11854374.html
Copyright © 2011-2022 走看看