前端構建工具（2） -- npm&yarn

zhangke3016 發布于2019-08-22 16:30 / 2633人閱讀

摘要：如果使用了代表代表，則跳過提問階段，直接生成一個新的文件。

前言

簡介:
node的包管理器,它隨nodejs一起安裝，即你安裝了nodejs就可以用npm進行包管理，通過npm可以從npm服務器下載別人上傳的第三方庫，下載并安裝別人上傳的命令行程序，上傳自己寫的第三方庫和命令行程序
可用npm -v查看npm版本號確定npm是否可用，如果npm版本過低，可以使用npm -install npm -g 進行升級

package.json：
package.json是項目的配置文件，npm會按照package.json中的配置進行包的安裝和更新，package中有內容主要是項目名稱name,版本version,擁有者author,證書license,依賴dependencies,開發環境依賴devdependencies等,更新包時，每次都按照package.json都下載大版本相同的最新包

package-lock.json:
package-lock.json中固定依賴包的版本到當前所用的包版本號，而不是只固定大版號，這樣可以避免有些包雖然大版本號相同，但是接口不兼容。

1、安裝包

1.0 安裝

$ npm install  
$ npm install  --force
$ npm install  [-g||-global]  [--save -dev]

機制：安裝前npm　install會先檢查node_modules目錄里是否已經存在包，如果無則安裝，如果有無論遠程倉庫有沒有最新版本都不安裝，若希望無論是否存在都重新安裝，則強制安裝：npm　install （包名） --f/--force

1.1 全局安裝：

npm install < packageName> -g  || -global

參數 -g / -global 代表安裝到全局環境中，即包安裝在Node安裝目錄下的node_modules文件夾中，一般在 Users用戶名AppDataRoaming pm ode_modules,并且寫入系統環境變量，可以通過命令行在任何位置調用它，一般全局安裝的是有命令行需求的packge

1.2 本地安裝：

npm install package-name || npm install package-name --save -dev

本地安裝，包安裝在當前定位目錄的node_modules文件夾下，通過require()調用，一般安裝在本地的是僅該項目需要的包

參數--save 的含義是代表把你的安裝包信息寫入package.json文件

-dev 將安裝包信息寫入devDependencies字段中，如果不使用-dev則信息寫入Dependencies字段中

注：使用packge.json是因為npm安裝的包很大，所以不加入版本管理，將包版本信息加入package.json進行版本管理，npm根據該信息進行包版本管理

1.3 package-lock.json
執行npm install 的時候之后項目中會增加一個package.json文件

2、其余常用命令行

2.1 更新已經安裝包

$ npm update

機制：先查詢遠程倉庫最新版本，再查詢本地版本，若不是最新則更新

2.2查看npm的幫助

$ npm help

2.3 查看已經安裝的包列表

$ npm list

2.4 初始化 package.json 文件

npm init

初始化生成一個新的 package.json 文件。它會向用戶提問一系列問題，如果你覺得不用修改默認配置，一路回車就可以了。如果使用了 -f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的package.json 文件。

3、淘寶鏡像cnpm

npm 安裝包的過程就是從http://registry.npmjs.org網站上進行下載和安裝，但是用于該網站在國外，國內進行安裝速度一般比較慢，所以淘寶團隊搭建了一個鏡像服務器http://npm.taobao.org ,該服務器每十分鐘進行一次更新，完全復刻國外的服務器，但是不能上傳包，只能下載安裝更新
配置淘寶鏡像：

npm install cnpm -g -registy="http://npm.taobao.org"

配置完成之后可以用cnpm代替npm進行安裝包，配置完后檢查是否配置成功

cnpm -v

4、npm與yarn

yarn誕生比較晚，但誕生之后就迅速受到熱捧，并在github上得到start超過npm,yarn一開始是為了解決npm語義版本控制導致安裝不確定性的問題

待續

GPU云服務器云服務器前端構建 js 2&amp&amp1 構建工具 android構建工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94413.html

(譯 &amp; 轉載) 2016 JavaScript 后起之秀

摘要：在年成為最大贏家，贏得了實現的風暴之戰。和他的競爭者位列第二沒有前端開發者可以忽視和它的生態系統。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發人員檢查所有端點。 2016 JavaScript 后起之秀本文轉載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 評論0 收藏0
前端開發環境如何搭建

1、node環境與開發工具準備前端工程化開發，本地啟動開發環境都是基于nodejs的，命令行里輸入指令node -v可以幫助確認您的電腦上是否安裝了node，如果沒有安裝，則可以去 node官網下載安裝包，如下圖所示：不管是在windows還是在mac環境下，都是一鍵傻瓜式安裝，甚至連環境變量都不需要手動配置，這里就不過多介紹了。2、開發工具準備前端的開發工具，常見的有VSCode、WebS...

社區管理員 2022-10-08 15:06 評論0 收藏0
Yarn 構建工具入門基礎

摘要：就是一個類似于的包管理工具，它是由推出并開源。二的安裝用法和基本工作流安裝以為例你可以通過包管理工具安裝。在使用一個包之前，你需要執行以下命令將其加入依賴項列表會被加入到文件中的依賴列表，同時也會被更新。一、yarn的背景和介紹一直以來，我們在安裝和管理依賴的時候基本上都會使用npm，npm是一個非常優秀全面且廣受歡迎的包管理工具，它奠定了前端模塊化開發的基石，為前端的發展做出了不可...

tuniutech 2019-08-23 11:58 評論0 收藏0
Laravel學習筆記三-前端工作流

摘要：本節將學習是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊，不管該模塊之前是否安裝過由于國內墻的原因，使用安裝會非常緩慢，慢到想切，不過還好，我們可以使用淘寶提供的國內鏡像進行下載。本節將學習 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。一、句法強大的樣式表Sass Sass 是一種可用于編寫CSS的語言...

liuchengxu 2019-06-27 15:14 評論0 收藏0
解析ahooks整體架構及React工具庫源碼

　這是講 ahooks 源碼的第一篇文章，簡要就是以下幾點：　　加深對 React hooks 的理解。　　學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。　　培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情。　　第一篇主要介紹 a...

3403771864 2022-11-06 18:34 評論0 收藏0