nodejs&&npm&&babel

 

node的可能的屬性:語言(與javascript完全一樣,後臺語言),平臺,環境。

-------------------------------------------------------------------

npm:在win下的nodejs下載包裏會像全家桶一樣一起打包進去;在ubuntu命令行下載nodejs的時候可能不包含npm,需要獨立單獨的下載。

npm === node package management

它存在的主要的目的就是處理好依賴關係(這點在linux中能夠直觀的顯示出來)。在ubuntu中,它有點類似於tasksel。

---------------------------------------------------------------------------------------

babel 的CDN的各種版本:

https://www.bootcdn.cn/babel-core/

babel,歷史上的ES6的polyfill(填充)工具,用於之前的在瀏覽器沒有大規模支持es6的編譯工具。

雖然有CDN,但是還是推薦使用NPM下載(多去官網看看)。這裏通過下載babel配置package.json等操作,進一步的瞭解的npm。

 

通過npm下載babel的命令行操作:

1.npm init 從外觀和形式上看,只是創建了package.json。但是package.json太重要,它包括了項目的一些基本信息以及一些依賴關係。並且可以通過package.json快速恢復項目/項目中涉及到的依賴關係

2.npm install --save-dev @babel/core @babel/cli   : 通過npm下載babel,同時在對應的文件夾會出現文件夾node_moudules

3.npm install/npm i   :當刪除掉node_moudules的時候,可以快速恢復node_moudules以及寫在package.json中的文件依賴關係(嘗試了幾次,雖然確實能下載東西,但下載的東西有點奇怪,最後編譯npm run build也得不到想要的結果。不知何故?後期有相關資料想明白了再更新)。

 

關於package.json

1.在scripts(這裏的"scripts"是腳本的意思)處配置快速寫法(命令行的簡寫模式).通過在script處添加 {"命令行的簡寫格式":"命令行的原來的格式"}這種格式,達到命令行的簡寫的目的。比如  原先需要在命令行輸入:node  server.js  -port=80   -s  -0  a.log,當在scripts中輸入{"start":"node  server.js  -port=80   -s  -0  a.log"},則原先的需要輸入一大段的命令行可以簡寫爲npm run start(注意start在scripts中的對應關係)。

2.具體而言,scripts處添加“scripts": { "build": "babel src -d lib" }的意義:將   babel src -d lib簡寫爲npm run build。再進一步解釋   babel src -d lib的意義:將src文件夾中的文件編譯(-d)到lib文件夾中

 

 

關於.babelrc

進行到這一步,如果沒出什麼差錯的話,只是把src中的文件整理了一下代碼(代碼對齊什麼的),放到lib文件夾中,並沒有真正的編譯。還需要最後一步,添加配置文件.babelrc,並且在文件內寫上:

{
  "presets": ["@babel/preset-env"]
}

與此同時,還需要下載前置環境(preset-env),官方原文摘抄如下:

To start, you can use the env preset, which enables transforms for ES2015+

npm install @babel/preset-env --save-dev

 

當沒有下載env preset的時候,ubunt環境下出現如下錯誤:

 Error: Cannot find module '@babel/preset-env' from '/host/js_html_css/quanzhan_development/babel'
解決方法:https://www.jianshu.com/p/74cb6203c39f。【後發現出現這個錯誤的具體原因是因爲還缺少東西,命令行下載如下:npm install @babel/preset-env --save-dev,可解決這個問題。見上述補充preset-env】

 

最後總結一下使用babel的流程:

npm init==>npm install -D babel==>修改package.json創建簡寫(此步可以省略)==>下載preset-env:
npm install @babel/preset-env --save-dev==>添加.babelrc文件,並在其內寫上相應的代碼-->npm run build;


 

一些注意點:

1.node_moudules是不能複製到其他的項目中的,否則會出大問題。因此,每建設一個項目,都需要npm init一下,創建自己的node_moudules.

2.接上面所述的第一點,一定要搞清楚npm init的用途,搞清楚項目文件將要放置的位置,不能直接在命令行裏敲擊npm install --save-dev @babel/core @babel/cli。在選擇好目標文件夾的目標位置的時候有2種方法(ubuntu爲例),一種通過命令行的cd命令不斷的操作到所需要的位置,一種可以在目標文件夾的目標位置右擊終端直接跳轉(第二種老版本ubunt好像不行?)。

3.babel src -d lib或npm run build編譯的是標準的js文件格式,不能是html等文件格式

-------------------------------------------

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章