parcel 初體驗 前端工做流輕軌

parcel 初體驗 前端工做流輕軌

前言

第一次聽老師講完parcel後，腦海中就一個反應 「妙啊，太秀了」，可是以後就以爲它其實也沒啥用，其實。雖然老師說過 傳統的寫html 太麻煩了，並且js寫到主界面的話，不簡約，不美觀。。。 額。。。其實想一想，仍是有道理哈（怕捱揍），咱們一塊兒來看看吧！

parcel

什麼是parceljs?

Parceljs是一款新的web應用打包工具，是一款零配置，以html爲核心的打包工具，而其中html 是做爲接口的。

web應用從最初的無打包，到grunt,yoman,gulp,webpack等以js爲核心，須要複雜配置的打包工具，尤爲是當下最火的webpack，大有一種前端工程師便是配置工程師的窘境。parcel比webpack更加輕量級，項目中用到的任何關於sass、less、圖片、路徑、及各類解析都是零配置，拿來即用型。

1. 安裝及使用

前提

新建 index.html、index.js 和 index.css，js寫在js文件中。

首先，進入建立HTML文件的那個文件夾的終端 輸入 npm init -y 初始化一下，

而後當前文件下會出現一個 package.json文件

額。。。。 package.json有啥呢？

package.json 文件其實就是對項目或者模塊包的描述，裏面包含許多元信息。好比項目名稱，項目版本，項目執行入口文件，項目貢獻者等等。npm install 命令會根據這個文件下載全部依賴模塊。

看到最後一句了嘛，npm install 命令會根據這個文件下載全部依賴模塊。

因此如今就是安裝parcel

繼續在終端中 輸入 npm i parcel ,若是成功了 package.json中會出現

"dependencies": {
    "parcel": "^1.12.4"
  },
複製代碼

那就是成功了， 咱們證實它成功以後，那咱們的點睛之筆來了，

打開package.json文件，找到

"scripts": {
    "start": "parcel index.html"
  },
複製代碼

裏面輸入 "start": "parcel index.html" 而這句代碼有啥用呢？ 它的做用就是 用parcel 啓動html。

最後，是騾子是馬，咱們要拉出來溜溜了，運行一下

在終端中輸入npm run start 以後，會出現 複製下面的網址，在瀏覽器中打開，就會出現你界面了

並且，你的目錄中會出現一個dist的文件夾，裏面裝着你寫的一切代碼

額，我想。。。js寫在js文件中你應該會調用吧！

算了算了，我本身也有點忘了，再複習一遍吧，在index.html文件的body中寫

<script src="./src/index.js">
  </script>
複製代碼

點，是上一級文件夾，在這裏，個人js文件放在根目錄下的一個文件夾中，因此寫成這樣，若是你的文件是放在根目錄下，那就直接寫

<script src="index.js">
  </script>
複製代碼

好了，到了這裏咱們就結束了咱們的講解了，謝謝你們。