iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

平時沒注意的 JavaScript - JS 生態系及週邊工具整理系列 第 27

回歸原點 - 來看看當初看無的 vue-cli 吧!

Hi 大家好

沒仔細回想的話可能不會發現

但是在前面幾週內,我們已經介紹了

  1. JavaScript 模組化概念
  2. Node.js
  3. CommonJS 標準
  4. NPM、相關指令操作、以及 node_modules 介紹
  5. 管理 dependency 的技巧: Yarn、package-lock.json、npm shrinkwrap
  6. 前端編譯: Webpack
  7. 設定你目標瀏覽器/客戶的版本!Browserlist
  8. webpack 的各種設定方式
  9. JavaScript 標準化的推進,以及 Babel

這是我們在第一個星期創的檔案 package.json

現在看,應該會有不少東西已經很熟悉了

就讓我們這邊來做一個複習,順便把沒介紹到的跑一次吧!

name, version, description, author, private

這幾個欄位在 Vue-Cli 所創建的 package.json + Webpack 設定大解析 已經有了非常詳細的介紹

Uploading file..._p9qwx5mk1

補充一點,除非要 publist 你的專案到 npm 官方的資料庫去

不然版本應該是不太需要調整的

scripts

這我們之前有做介紹

scripts 裡寫的內容,我們通常會叫他 npm scripts

基本上我們會把專案執行、編譯、測試該使用的指令,都寫在這個欄位

這邊 vue-cli 有幫我們產生 dev start lint build

dev

之前其實 webpack 有個功能沒有介紹到

那就是 webpack-dev-server

他基本上是 webpack 開發團隊的另一個專案

如果有用過 livereload 應該會很熟悉

那就是會幫你在檔案更新時,自動編譯

並自動幫你刷新(他基本上就是一個 webpack + socket livereload)

他刷新的方式也很特別,是他們自己設計的 hot-module-replacement

他會只把有跟改動相關的模組更新,而不重整整個頁面

這邊 npm run dev 將會去執行

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

其中 webpack-dev-serverwebpack 幾乎一樣,只是加上了 hot-module-replacement 的功能

webpack-dev-server 其實有兩種刷新模式可以選,有 inlineiframe

這兩個的差別我沒有很了解,想知道詳細可能得去看原始碼(文件上沒寫)

https://webpack.js.org/configuration/dev-server/

--progress

這個開啟的話,編譯時會顯示進度

--config build/webpack.dev.conf.js

這個跟 webpack 一樣,我們這裡指定要使用 build/webpack.dev.conf.js 這個設定檔

start

這條還滿神秘的

因為你可以看到,npm run start 只是把 npm run dev 再跑一次而已

其實有點多此一舉,不過我猜想加這條有幾個原因

  1. 有些工具(像是 heroku),他們的服務會自動幫你執行 npm run start 這個指令
  2. 可能有人進專案,什麼都不看就先 npm run start 跑跑看(?)

我後來有追到這條改動

vue-cli 其實使用的模板不是放在 vue-cli 這個專案底下

而是在 vuejs-templates 這個專案裡

我有發一個 comment 問這條的改動原因(希望沒有不禮貌)

https://github.com/vuejs-templates/webpack/commit/6f7c03d85021c426aaa7465406a43bcf503a13d9

lint

關於 eslint 這篇 介紹的很棒

基本上他是一個語法檢查

不過有趣的地方是,其實 eslint-loader 這樣的工具就可以把他跟 webpack 包在一起用了

https://github.com/MoOx/eslint-loader

不知道為何要獨立成一個指令

build

執行 build/build.js 這隻檔案來進行編譯

明天

這邊還有下面使用的各個 dependency,以及

build/webpack.dev.conf.js, build.js 這兩隻檔案到底做了哪些事情

我會挑其中一個題目來講,大家明天見!


上一篇
設定 babel-loader 來編譯 ES6, ES7, ES8, ES-Next 的程式碼!
下一篇
深入探索 vue-cli,讓我們來看看 build/build.js 與 build/webpack.dev.conf.js 做了些什麼!
系列文
平時沒注意的 JavaScript - JS 生態系及週邊工具整理33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Chris
iT邦新手 4 級 ‧ 2018-02-16 17:37:14

圖壞掉了

我要留言

立即登入留言