來自新手的npm命令使用小總結

   


本人做爲前端新手小白,在剛使用VScode編譯器時便感嘆十分便利,與在校時老師推薦的DW方便不知多少,輕量級的基礎下還具備豐富的插件安裝選擇,無比的便利。可是在新接觸這些新知識時,首先就在安裝這些新插件的路上碰了壁,所以在此總結一些本人所學習到的命令與所遇到的問題與你們分享。 javascript


 第一步html

 想要進行接下來的操做首先咱們須要安裝無比好用的VSCode前端

傳送門:code.visualstudio.com/java


 在完成了VSCode的安裝以後,若是對英語界面看不習慣的小夥伴能夠安裝中文插件,此時,VSCode強大的功能就體現出來了——插件商城:node



在插件商城搜索Chinese便可搜索到中文版,因爲本人已安裝簡體版,因此搜索中未出現,可是若是沒有安裝中文版的同窗選擇安裝簡體版便可。算法


第二步 安裝Node.jstypescript

NPM是隨同NodeJS一塊兒安裝的包管理工具,能解決NodeJS代碼部署上的不少問題,常見的使用場景有如下幾種:shell

  • 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
  • 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。


Node.js安裝傳送門:nodejs.org/en/npm


安裝完成Node.js以後,須要對其進行配置,對此贅述太多你們確定嫌我囉嗦,因此咱們繼續json

Node.js傳送門安裝步驟:www.runoob.com/nodejs/node…


在完成了以上步驟以後,咱們就能夠來開始咱們今天的主題了——使用npm命令


當咱們在編輯完成一個JS文件以後,咱們想要在VScode之中運行它,咱們固然能夠選擇直接運行它,當時因爲今天談的是npm命令,因此咱們仍是繼續按照主題走下去。

當完成一個JS文件以後,想要運行它,找到該文件,右鍵點擊它,會出現下面這個畫面:


選擇打開終端,咱們就正式開始了今天的主題


1.node -v


來到這一步,咱們的電腦應該都安裝好了Node.js而且而配置好了環境。所以在終端部分輸入該命令便可查看版本號,能夠知道是否成功安裝Node。



2.node .\1.js

如下圖爲例,在終端輸入該命令按下回車以後便可運行該文件


注:在輸入完node以後,直接按下Tab鍵能夠直接跳出文件名,減小了輸入時間。


3.npm -v


此命令一樣是查看是否安裝了npm,查看版本號。npm屬於node.js中的包管理器,在安裝了node.js時已經安裝。


4.npm install 或npm i


若是沒有安裝npm,則能夠輸入該命令進行安裝。


5.npm config set registry https://registry.npm.taobao.org

 

因爲npm安裝是外網,因此不少人安裝速度會很慢,所以在終端輸入該命令可使你們的下載速度大大加快。



6.live-server

在終端輸入該命令能夠實如今編輯html文件時再也不須要不斷地刷新網頁才能看到新的變化,能夠根據你的代碼實時更新內容。

許多人在輸入這個命令時會遇到下面這個問題


若是遇到了這個問題,先不用慌,咱們有兩種解決方法:


第一種:插件商城下載插件

若是使用npm命令沒法安裝live-server,能夠直接在插件商城搜索live-server進行安裝,安裝完成以後,直接在找到想要打開的文件,點擊右鍵便可經過live-server打開文件



第二種: windows powershell

第一步:打開電腦開始界面,找到windows poweshell,右鍵點擊,以管理員身份運行



第二步:輸入set-ExecutionPolicy RemoteSigned命令,肯定後輸入yes以後退出powershell,而後再次來到VScode終端輸入liver-server便可正常安裝。


7.npm init -y

該命令能夠初始化一個node文件,在行使完該命令以後,文件夾裏會自動生成一個package.json項目描述文件。


8.npm init

將剛剛經過npm init -y生成的json文件刪除,再於終端之中運行該命令,能夠開始對新建的json文件在終端之中進行描述。

9.npm -g stylus

在執行該命令以後,有可能會出現像剛剛安裝live-server同樣的錯誤,解決方法參照powershell方法解決。在安裝完成以後,文件夾中會出現一個帶有styl後綴的新文件,有了這個文件,咱們之後編寫CSS代碼時即可以縮短許多時間,提升寫代碼的效率。


10.stylus -w .\index.styl -o

在完成npm i -g stylus命令的安裝以後,再輸入stylus -w .\index.styl -o命令,則能夠開始對styl文件開始監聽,實時生成新的CSS文件,爲寫CSS代碼提供了極大的便利


11.npm  i -g  nodemon

相信不少小夥伴在設計算法時要是循環數太大最後運行計算出來速度特別慢並且還會報錯內存溢出,並且在更改數值的時候須要屢次更改,十分不便,所以這個插件安裝能夠給咱們運行代碼代來極大的便利。


12.nodemon .\index.js

在終端中運行這個命令則能夠在運行JS文件中的算法類型題目時減小繁瑣的步驟,給予咱們極大的便利。


13.npm i -g typescript

javascript做爲一門弱類型語言,許多結構上仍是有缺陷的,typescript 是 js的超集,能夠將js由弱類型轉爲強類型,所以以上命令在終端運行以後,咱們就能夠開始typescript的編寫了,不但提高了代碼的可讀性與優美性,同時還極大的優化了代碼運行效率。

14.tsc  index.ts

在生成了typescript文件以後,在終端輸入該命令以後,則會自動在文件夾之中生成一個JS文件,當咱們在typescript文件中使用極簡代碼編寫時,會在相應的JS文件中同時生成代碼,極大的減短了咱們的編寫代碼時間,同時讓咱們的代碼變得更優美。


總結

以上一些知識都是本人學習前端開發時的一些小經驗,但願能夠幫到和我同樣的新手們,若是有不足的地方也歡迎各位大佬指正。

相關文章
相關標籤/搜索