石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
在前面的內容純屬胡說八道,如果想要看正文,請直接滾動條往下拉,以省下寶貴的時間繼續卷。
要想對 JavaScript 代碼進行打包,我們可以依賴 webpack 對我們的幫助我們完成這一件事情。要想使用 webpack,首先需要我們安裝 webpack,首先對項目進行初始化:
npm init -y生成配置配置文件:
圖片
要想使用 webpack,首先需要安裝 webpack 以及 webpack-cli,這里還有 html-webpack-plugin,用于生成 html 模板,具體命令如下:
npm install webpack webpack-cli html-webpack-plugin -D依賴安裝完成之后,我們需要在跟目錄上面創建一個名為 webpack.config.js,當然,你也可以創建其他文件名的 js 文件,并添加以下配置:
const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "./dist"), }, mode: "production", plugins: [ new HtmlWebpackPlugin({ template: "./index.html", }), ],};為了能執行打包命令,我們在 package.json 文件中的 script 中添加這一段命令:
"build": "webpack"如果你使用的 webpack 配置文件名為其他的則需要在該命令中添加相對應的路徑,否則在執行命令的時候 webpack-cli 則無法找到相關的配置。
接下來我們創建在根目錄下創建一個 src 目錄,在目錄下面創建一個 index.js 文件,作為整個項目的入口,并在文件中添加一些自己想寫的代碼:
console.log("hello webpack");此時,在命令行中輸入一下命令:
npm run build此時文件被輸出出來了:
圖片
生成的文件是根據我們前面的 webpack 配置文件中生成的,通過運行 index.html 文件,hello webpack 也被輸出在瀏覽器控制臺上面:
圖片
但是這個方法存在弊端,當我們對源代碼進行修改的時候,它并不會對我所修改的代碼進行重新編譯,要想能夠在瀏覽器中看到最新效果,你必須通過重新執行 npm run build 打包才可以,開發效率極其低下。
webpack 有一個 watch 屬性可以監聽文件的變化,當監聽到文件變化,當它們修改后會重新編譯,要啟用 watch,你只需要在 webpack.config.js 文件中設置 watch:true即可,詳情如下:
module.exports = { ..., watch: true,};或者在 package.json 文件中 script 下修改添加 --watch.代碼如下所示:
"build": "webpack --watch"控制臺再次執行 npm run build,你會發現這次控制臺不會結束了,會一直開啟著,詳情請看下圖:
圖片
當我們修改文件內容的時候,watch 會監聽著文件變化,如下圖終端所示:
圖片
并且瀏覽器上的內容也會隨著變化而變化,你也可以配置 watchOptions 來使你的項目更快,例如:
watchOptions: { aggregateTimeout: 6000, ignored: /node_modules/,},在上面的配置中,當第一個文件更改,會在重新構建前增加延遲,它會將這段時間內的所有更改都聚合到一次重新構建中,以毫秒為單位。對于某些系統,監聽大量文件會導致大量的 CPU 或內存占用。可以使用正則排除像 node_modules 如此龐大的文件夾。
盡管有這些配置,效率仍然不高,編譯成功后,都會生成新的文件,并且需要開啟 live-server,但是這個插件屬于 vscode 的,但是在其他編輯器上并沒有,并不屬于 webpack。
live-server 每次都會重新刷新整個頁面,并不能保存當前頁面的狀態,還會編譯所有的代碼。
webpack-dev-server(簡稱 WDS) 為你提供了一個基本的 web server,并且具有 live reloading(實時重新加載)功能。要想使用使用你首先要安裝該依賴:
npm install --save-dev webpack webpack-dev-server繼續在 package.json 文件中 script 下修改添加一段命令.代碼如下所示:
"start": "webpack serve --open"完成之后,在終端下輸入以下命令執行:
npm startWDS 會自動為為你自動開啟電腦上的默認瀏覽器,并且默認的端口為 http://localhost:8080/,在終端里有如下輸出:
圖片
在瀏覽器上有如下輸出:
圖片
默認開啟 live Reload ,當代碼發生改變時會自動重新對代碼進行編譯。
webpack-dev-server 啟動了一個使用 express 的HTTP服務,這個服務器與客戶端采用 WebSocket 通信協議,當原始文件發生改變,webpack-dev-server 會實時編譯,但是對 index.html 的修改不會做出處理。
通過查看 webpack-dev-server 源碼中的 package.json 文件,我們發現這里定義了一個 bin 字段,那么這個 bin 有什么用呢?
bin 字段是命令名到本地文件名的映射。當我們使用 npm 或者 yarn 命令安裝包時,如果該包的 package.json 文件有 bin 字段，就會在 node_modules 文件夾下面的 .bin 目錄中復制了 bin 字段鏈接的執行文件。我們在調用執行文件時,可以不帶路徑,直接使用命令名來執行相對應的執行文件。
也就是說,當我們在終端中輸入 npm install webpack-dev-server -D 的時候,會在 node_modules/.bin 目錄下生成了三個文件:
圖片
這三個文件中,其中的 ·cmd 是 windows 中默認的可執行文件,當我們不添加后綴名時,自動根據 pathext 查找文件。
當我們執行 npm start 的時候,會在 node_modules/.bin 目錄下找到 webpack-dev-server.cmd 目錄,因為這個文件是 windows 的批處理腳本:
@ECHO offGOTO start:find_dp0SET dp0=%~dp0EXIT /b:startSETLOCALCALL :find_dp0IF EXIST "%dp0%/node.exe" ( SET "_prog=%dp0%/node.exe") ELSE ( SET "_prog=node" SET PATHEXT=%PATHEXT:;.JS;=;%)endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%../webpack-dev-server/bin/webpack-dev-server.js" %*在這寫代碼里的最后一行 "%dp0%../webpack-dev-server/bin/webpack-dev-server.js" 命令中,通過軟連接鏈接到 node_modules/webpack-dev-server/bin 中的 webpack-dev-server.js 目錄。
所以當我們運行 npm start 的時候,也就是相當于運行 node_modules/.bin/webpack-dev-server.cmd serve 命令,并最終以 webpack-dev-server/bin/webpack-dev-server.js 就是整個命令行的入口,通過這里,它會自動給你開啟 webpack-cli,詳情請看下圖:
圖片
所以當我們沒有安裝 webpack-cli 的時候運行 npm start 時會有以下提示:
圖片
在這里 webpack 就會基于我們 webpack.config.js 里創建一個 compiler,然后基于 compiler 和 devServer 相關配置生成一個 WebpackDevServer 實例,該實例會啟動一個expores 服務來幫我們監聽靜態資源變化并更新。
在 webpack-dev-server 源代碼中,有一個 Server.js 的目錄,創建了一個 Server 類,用于啟動的是 start(...) 方法中通過 socket 監聽一個端口,默認使用的是 8080,初始化 client 和 dev-server,以 p[lugin 的形式掛載到 compiler 上,添加 hooks 插件,實例化 express 服務等等,有以下代碼,詳情可自行查看,可以通過安裝依賴的方式,也可以到 GitHub:
圖片
接下來我們看看 await this initialize(...) 都干了些啥?詳情請看下列代碼(省略了后面部分):
async initialize() { if (this.options.webSocketServer) { const compilers = /** @type {MultiCompiler} */ (this.compiler).compilers || [this.compiler]; compilers.forEach((compiler) => { this.addAdditionalEntries(compiler); const webpack = compiler.webpack || require("webpack"); new webpack.ProvidePlugin({ __webpack_dev_server_client__: this.getClientTransport(), }).apply(compiler); compiler.options.plugins = compiler.options.plugins || []; if (this.options.hot) { const HMRPluginExists = compiler.options.plugins.find( (p) => p.constructor === webpack.HotModuleReplacementPlugin ); if (HMRPluginExists) { this.logger.warn( `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.` ); } else { // Apply the HMR plugin const plugin = new webpack.HotModuleReplacementPlugin(); plugin.apply(compiler); } } }); if ( this.options.client && /** @type {ClientConfiguration} */ (this.options.client).progress ) { this.setupProgressPlugin(); } }在 initialize() 方法中還有以下方法的調用:
this.setupHooks();this.setupApp();this.setupHostHeaderCheck();this.setupDevMiddleware();this.setupBuiltInRoutes();this.setupWatchFiles();this.setupWatchStaticFiles();this.setupMiddlewares();this.createServer();在這里,主要做的事情是將 client 以 plugin 的形式掛載到 compiler,如果存在 HMR,則開啟 HMR,通過 this.setupWatchFiles() 監聽文件變化。
在 this.setupHooks() 中,主要做的事情就是在 webpack 的 done 鉤子上掛了個給客戶端廣播消息的回調,通過這個回調就知道工程代碼有更新,這時候客戶端就會發送請求給 express 服務去請求最新的 webpack 打包的代碼,詳情請看以下代碼:
setupHooks() { this.compiler.hooks.invalid.tap("webpack-dev-server", () => { if (this.webSocketServer) { this.sendMessage(this.webSocketServer.clients, "invalid"); } }); this.compiler.hooks.done.tap( "webpack-dev-server", /** * @param {Stats | MultiStats} stats */ (stats) => { if (this.webSocketServer) { this.sendStats(this.webSocketServer.clients, this.getStats(stats)); } /** * @private * @type {Stats | MultiStats} */ this.stats = stats; } ); }當客戶端接收到 websocket 廣播的消息后,會觸發reloadApp方法(webpack打包時注入進去的)reloadApp會根據廣播消息里的更新類型選擇是頁面更新 liveReload 還是模塊更新 HMR,通過測試,發現每次修改正是都會經過 sendMessage 方法。
圖片
上圖正是 webpack-dev-server 的整個流程圖,到這來,這篇文章的內容也就講完了,如有錯誤,煩請批評指出。
本文轉載于：https://juejin.cn/post/7187368174952644665
本文鏈接：http://www.tebozhan.com/showinfo-26-44422-0.html在終端里輸入 npm start 后都發生了啥
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 利用IntelliJ IDEA內置Git插件，輕松使用Github
下一篇： Spring如何使用三級緩存解決循環依賴
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號