點擊上方藍色字關注我們~

一、前言

雖然 Vue3 已經公開了代碼,但是Vue3.0還處于開發階段，直接上手使用Typescript是不合適的 , 對于前端的老手是不錯的選擇, 但是如果沒有研究源碼經驗的開發者還是建議使用完善, 成熟的源碼進行入手. 而 Vue 2.x 中使用的 flow 是一個類型的校驗工具, 可以簡單的認為他是一個靜態分析工具, 或編譯檢查工具.?而且非破壞式的引入, 完全可以作為我們一般開發任務的工具進行引入. 所以我們要簡單介紹一下 flow 的使用, 一方面可以提升平時開發效率, 另一方面為了看明白 Vue 的源碼也很有必要. 另外構建工具使用 Rollup, 因為 Vue 就是用的它, 簡單明了, 比起 Webpack 沒它強大, 但是夠簡單.

二、flow與rollup的基本用法 ?

flow這里推薦一下flow的官方地址，如果本章節有不夠完善的地方，可以去官方進行詳細的學習。https://flow.org/flow本身只是一個靜態的語法檢查工具優勢：1.足夠簡單，合適使用2.可以為已有的項目，進行優化3.為typescript做一個鋪墊準備使用：用法：1.使用命令行工具a.編寫代碼，執行命令檢查如果有問題則提示，沒問題跳過(和傳統編譯型語言 非常相似)2.使用IDE插件(推薦)a.也和現在編譯語言一樣，我們在編寫完代碼之后，錯誤信息IDE工具會給你提示出來(所見即所得)安裝的內容：1.flow-bin它就是flow的靜態類型檢查工具(主程序)2.編譯器(compiler)，例如flow-remove-types，將類型的語法結構刪除掉，還原成純js的文件。安裝：1.全局安裝npm install --g flow-bind? 項目目錄安裝npm install -D flow-bind2.npm init -y(-y默認全部yes快捷創建)創建package.json文件，在文件中的scripts中添加：使用命令：npm run flow init在項目文件夾的根目錄創建一個.flowconfig文件npm run flow check對所有文件夾進行類型檢查npm run flow啟動Flow服務(只檢查變化部分)flow執行Flow檢查npm run flow stop停止Flow服務在被檢查的文件最頂部添加 @flow 標識的注釋對該文件進行檢查flow 命令行工具的用法首先需要安裝軟件：$ npm i flow-bin flow-remove-types編寫代碼：代碼中添加 一個 注釋 // @flow 或者 /* @flow */在運行 flow 之前, 使用 npx flow init 初始化檢查代碼：$ npx flow注意:npx 是 node 工具, 是為了使用項目文件夾下 node_modules 中的可執行程序的工具。flow-remove-types將代碼轉換為純 js 的代碼npx flow-remove-types 源文件 -d 生成的文件一般會將該命令配置 到 package.json 文件中使用 IDE 插件：推薦使用 flow language support 這個插件 ( VS Code 編輯器 )Vue 源碼說明：.flowconfig 中module.name_mapper='^sfc/(.*)$' -> '/src/sfc/\1' 的含義是將 代碼中 from 后面導入模塊使用的路徑 sfc/xxx/aa 映射到 項目根目錄/src/sfc/xxx/aarollup的基本用法官方地址：https://www.rollupjs.com/Rollup是一個javascript模塊打包器，可以將小塊代碼編譯成大塊復雜的代碼，例如library或應用程序。Rollup對代碼模塊使用新的準備化格式(es6模塊語法)注意:a.版本, 生成文件的版本b.使用模塊化的語法是ES6語法( http://es6.ruanyifeng.com/#docs/module )使用：c.安裝 ( 局部 安裝 )d.rollup 源文件的路徑 --file 生成文件的路徑 --format umd --name 生成的庫的名字?

三、總結

webpack誕生的時候，為了解決css、圖片等靜態文件的構建和使得代碼能夠按需加載實現了code-splitting，在我們日常線上業務代碼開發中，或多或少有一些靜態資源需要打包，此時rollup顯得不太適用。所以我們可以看到，在構建一些lib的時候可以選擇rollup,而在構建一些應用的時候，選擇webpack.

往期回顧

程序員擇業疑惑：前端要涼？學習Vue還有必要嗎？

牢記！前端工作中遇到99%的工作，都不能靠跳槽解決

前端這道“常見又討厭”的面試難題，要怎么答？

技術大佬都在用碎片時間學習Vue充電，你竟然還能坐得住？

前端年度跳槽技術要求：不懂Vue千萬別輕舉妄動！!

·END·

極光學苑

帶你飛向夢想的地方

微信號：極光訓練營

?謝謝你的“在看”???

總結

以上是生活随笔為你收集整理的vue 非es6 写法怎么按须加载_Vue源码必学指南：flow(语法检查)以及rollup(模板打包)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。