vue（8）—— 模塊化開發 - webpack（2）

来源:https://www.cnblogs.com/yangva/archive/2019/03/26/10595209.html
-Advertisement-
Play Games

webpack的常用loder和插件 loder和插件是什麼，現在暫且不表，看到後面你就懂了 引入css問題 直接用link標簽導入css 在前面的講解中，相信已經對webpack有一定瞭解了，相比很多朋友已經躍躍欲試了，準備要搞一個自己的小 ...


webpack的常用loder和插件

 

loder和插件是什麼，現在暫且不表，看到後面你就懂了

 

引入css問題

 

直接用link標簽導入css

在前面的 vue（7）—— 組件化開發 — webpack（1）  講解中，相信已經對webpack有一定瞭解了，想必很多朋友已經躍躍欲試了，準備要搞一個自己的小網站出來了，寫上css，調整好代碼，準備說乾就乾：

 

 

 

 

同樣的，因為以後的開發中，肯定會有很多個css文件，可能一個vue組件就需要一個css文件，然後你又跟前面的js文件引入一樣，在html文件里用link標簽引入一堆的css嗎？

這還是那個用戶體驗的問題。

 

在組件文件里用import導入css

 

所以，這裡的解決方法還是同js文件一樣，用導包的方式： import   ‘./XX.css’

 

註意：導入css通常情況下是在入口組件里導入，而不是隨便哪裡都可以導入，當然最準確的還是根據自己的代碼邏輯做相應調整

 

 

 

index.html:

 已把link標簽刪除掉，通過導入編譯好的bundle.js來插入css

 

 

好，在終端，使用命令npm run dev編譯一下，發現報錯了

 

 

 提示的意思是說你需要一個loader組件來控制這個css格式類型的文件

 

這裡要補充下，webpack.config.js是js文件，我們定義的vue局部組件尾碼也是js，而webpack預設只識別js文件，不能識別處理非js的文件，所以需要一個loder引導識別。所以在前面沒遇到這個問題，現在遇到了

 

所以這裡需要安裝一個css的loader，是的，以上都是引子，就是為了引出這個loader

 

css-loader安裝

 

安裝的時候記得安裝兩個，一個是css-loder這個是識別css尾碼的文件，還要安裝一個style-loader，這個是識別<style>標簽的

npm  i css-loader style-loader -D:

 

安裝完成後，package.json的開發環境里已經自動寫入：

 

 在webpack配置文件裡加入如下，webpack.dev.config.js

 

 

 

 

註意

  • module，test,loader都是固定的鍵，不能更改
  • style-loder!css-loader，意思是先載入css-loder，再載入style-loder


關於這個很好理解，肯定是先有css文件，再有的css樣式對吧，主要就是這裡的【！】是先取後面個的意思

 

module.exports = {
    entry: { //入口
        name: './dist/app.js'  //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    module:{
        loaders:[
            {
            test:/\.css$/,
            loader:'style-loader!css-loader'
            }
        ]            
        
    }
}

 

 

另外的webpack.prod.config.js配置是暫且不管，當然你也可以設置成一樣的，記得把watch屬性刪掉

 

 

現在再使用命令 npm  run dev 編譯看看

 

 

編譯成功，再次打開index.html文件： 

 

link標簽和style標簽都是bundle自動加上去的 

 

 

 

完美吧，終於可以顯示css了

 

如果你在編譯的時候遇到問題，比如遇到以下問題，請檢查你的webpack.dev.config.js文件與css相關的配置是否有問題

 

 

註意：如果你遇到這樣的寫法，不是loders而是rules，不是loder而是use，這種也可行，這是新版的寫法，不重要，效果是一樣的

 

 

高級css語言

 如果你的代碼里有使用高級的css語言，比如less之類的，你同樣需要重新安裝一次loder，less對應的是less-loder，sass對應的是sass-loder，其他的就不多說了，可以去npm官網查

 

css里的url問題

  在寫css時，肯定會有引入一張圖片的樣式，比如這裡：

 給入口的div綁定了一個id為main屬性：

 

我事先在項目的根目錄放了一張圖片，1.jpg，寫上css樣式，比如：

 

 當完成以上操作的時候，這邊的實時監聽的已經報錯了：

 

是的，又需要安裝一個針對url的loader， npm  i   file-loader  url-loader -D，網不好的話你可以使用前面說過的nrm來安裝

 

安裝完，package.json文件里又自動多了兩個參數：

 

 

 

再在webpack.dev.config.js里配置如下，圖片格式有png，jpg，gif，jpeg，bmp，png，所以寫瞭如下

註意：只添加url-loder，不用給file-loder

 

 

 將那個錯誤的卡住的編譯程式按ctrl+c終止掉，重新運行，沒有報錯：

 

打開網頁： 

 

 

右邊的css樣式就是url-loder把圖片自動做base64編碼了，然後通過瀏覽器讀取base64編碼，藉此顯示圖片

 

直接複製按個base64編碼地址，另起一個瀏覽器視窗，是可以直接打開的：

 

 

完美

 

 

 

在loder部分還可以給參數

 

 因為圖片用的base64編碼，那麼就可以稍微做限制，webpack.dev.config.js:

 

 

 

module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            }
        ]

    }
}

 

 

打開網頁：

 

 

 

我添加的那幾個參數的意思：

 

  • limit：瓶頸顯示，limit=20，limit單位是bytes，如果超過給定的值則不會作為base64編碼，如果沒超過則作為base64編碼
  • name：指圖片將被編碼的名字，[hash:8]指取hash值前8個，[name]即原來的圖片的名字，[ext]指原來的圖片的尾碼名。此時的圖片，原來的就是1.jpg，所以這裡是 558c08ec-1.jpg

  • 如果不給name屬性，webpack會按自己的規則設定，把文件名取hash值，預設取32位，作為最後的名字

 

 引入bootsrap庫

 

首先使用npm安裝bootstrap:

 

 

導入bootsrap 

 

作為入口的app.js，這裡說明一下，如果是引入下載的插件，不用寫文件的路徑，只有引入自己寫的文件才需要寫文件路徑

 

webpack配置

 webpack配置文件不用變，同上

 

module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            }
        ]

    }
}
webpack配置

 

 入口組件app.js

 

在app.js入口組件里寫入bootstrap的樣式，給了幾個比較簡單的class名：

 

 

 最後index.html顯示結果：

 

當然你會發現，在項目根目錄有編譯過的圖片文件：

 

 

引入字體

 

字體就不用多說了，其實字體也是個url，所以用url-loader就行了，webpack配置:

 

 然後你就可以在css樣式里寫入你需要的字體樣式就行了，這裡就不展示示例了，自己體會了

 

處理es6語法

 

在前面已經瞭解了，瀏覽器預設不識別es6的語法，es即ECMAscript6，比如class定義類，瀏覽器就不識別，不知道後續的瀏覽器會不會識別這些了。

 

我在code1.js上定義了一個es6的類：

 

 

 

 

 這邊已經報錯了：

 

 

此時怎麼辦呢？對了，還是用loder

 

安裝插件

 

安裝兩個插件：npm i babel-preset-env babel-preset-stage-0 -D

 

 

註：如果babel-preset-stage-0用不了，可以卸載了安裝babel-preset-stage-es2015，babelrc部分相應的也要改動對應的stage

 

安裝另外一套插件：npm i babel-core babel-loader bable-plugin-transform-runtime -D

  

 

 

註：

 

1.如果你的webpack版本比較低，安裝的babel-loader無法使用（因為預設安裝的最新版）

你可以安裝指定版本，npm i babel-loader@7，我安裝的7可用

 

2.如果你在安裝 npm i babel-core babel-loader bable-plugin-transform-runtime -D 時出錯：

 

多試幾次，或者切換下npm安裝源試試

 

 

設置bable

好的，安裝完成之後。直接在項目的根目錄，創建一個【.babelrc】文件，寫入如下參數：

 

 

 

 

{
    "presets":["env","stage-es2015"],
    "plugins": ["transform-runtime"]
}

 

註意對應你安裝的stage版本，我安裝stage-0用不了，已經切換了stage-es2015

 

 

 webpack配置文件

如下修改：

 

module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            }
        ]

    }
}
webpack配置文件

 

 

其實用path組件也可以，這個path組件是內置的，如下寫也可以：

 

 

 

var path = require('path')
module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:path.resolve('./node_modules')
            }
        ]

    }
}
webpack-path

 

 

exclude的意思是排除根目錄下node_modules里的js文件，因為不排除的話，babel就會去編譯node_modules里的js，消耗資源不說，編譯了用不了

 

編譯運行

 

現在運行npm run dev再看：

 

 

 

 如果編譯時報錯：

 

意思就是說最後那個‘./node_module’無法識別。

 

所以在exclude部分，你要嘛用path.resolve('./node_modules')，要嘛用/node_modules/，其他的寫法都是錯的

 

正確編譯：

 

其實已經識別了，但是說我這有語法錯誤

 

好的，我稍微修改一下，立馬不報錯了

 

 

好的，這裡這個babel算是比較高級的用法了，以後還會用到，就不多解釋了。目前你就記住，babel是把es6的高級語法編譯成瀏覽器可識別的低級語法就行了

 

html-webpack-plugin插件

 

在以後的開發中，可能有這種需求：

 

當我們已經確定把項目碼好，準備把代碼輸出來，然後直接把輸出來的相關文文檔拷走即可，這樣的需求，怎麼辦？

完全可以讓webpack編譯的時候自動生成html文件，而不是我們自己去手動的設置，因為我們改動的目前只是開發環境，有些東西其實對於生產環境來說是不需要的，所以這個怎麼操作呢？

 

安裝html-webpack-plugin 

 

 

webpack配置

 

 然後在webpack.prod.config.js文件里作如下配置：註意這次是生產環境的那個webpack配置文件了：

 

 

var path = require('path')
var htmlwebpackplugin = require('html-webpack-plugin')
module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        path:path.resolve('./src'),//相對轉絕對，設定一個輸出文件路徑
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    plugins:[
        new htmlwebpackplugin({
            template:`./index.html` // html文件參照物，即開發環境下的html文件
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            }
        ]

    }
}
webpack.prod.config.js

 

編譯運行

 

其他不用變，把剛纔的測試環境卡住的npm run dev停掉，用npm  run build:

 

 

 之後則會在根目錄下自動生成一個src文件夾：

 

 打開index.html，發現一個小問題，出現了兩個bundle。

 

問題解決

因為使用npm  run build時，會自動給我們配置一個bundle，但是我們的參照的那個index.html文件里本來就有了一個bundle，所以，把參照物里的bundle刪除：

 

再次使用npm run build編譯：

 

 這下正常了，完美

 

所以，這個 var  htmlwebpackplugin = require('html-webpack-plugin')有兩個作用：

 

1.參照開發環境的文件打包

2.自動編譯好並把打包好的bundlue.js文件添加進html文件里

 

 

 

http-server插件 

 

 

最後還有個插件，一個偽伺服器插件 http-server。如果你使用的是pycharm開發的話，pycharm自帶了這個功能，在html文件直接點右上角的瀏覽器圖標即可自動掛載在本地埠。詳細的就不多說了

 

安裝插件

 

 因為一會兒要直接調用命令使用，所以安裝在了全局

 

啟動

 

使用命令 hs -o -p 8888，意思是通過8888埠啟動 

 

 

如果你設置預設的瀏覽器的話，會自動啟動預設瀏覽器，然後自動開始一個新視窗直接打開：

 

 

換了一個瀏覽器，正常訪問：

 

webpack-dev-server插件

 

又來個問題了，如果你每改一次都要刷新一次嗎？很煩對不對，所以有必要有一個工具當我們改完代碼，不用刷新瀏覽器頁面，自動的更新，類似剛纔我們用的webpack配置文件，實時監聽的效果：

 

 

安裝webpack-dev-server插件

註意，安裝webpack-dev-server時，由於新版需要webpack-cli（cli即腳手架，後面會講到）的支持，所以最好安裝低版本的：

 

webpack配置

 

webpack.dev.config.js：

 

其實跟上面的一樣沒有變，註意是開發環境下的配置文件，不是生產環境下的配置文件

 

module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    watch: true,
    
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            }
        ]

    }
}
webpack.dev.config.js

 

package文件修改

 

package.json配置文件作如下修改：

 

 

"scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },

 

去掉之前用過的bundle

 

其實這一步不用做也可以，因為不影響，但是為了和後面要說的原理對應，所以改了文件名

 

把之前bundle文件改為：bundle.backup.js:

 

 

編譯運行

 

現在再用命令 npm run dev啟動編譯

 

 自動打開瀏覽器：

 

修改代碼

 

我現在修改一下文字的顏色，因為背景圖顏色和字體顏色有點不搭配我改成黑色：

 

 

這邊的watch 發生變化，自動在重新編譯：

 

 

再次打開瀏覽器，根本不用刷新，已經自動運用上css了，完美，這才是我們希望的開發環境

 

而此時，項目目錄下根本沒有bundle.js文件：

 

剛纔我們用的bundle.js文件已經改名了，所以不可能是之前我們生成的bundle文件產生的效果

 

 

這就是webpack-dev-server的特性：

自動監聽編譯，並且生成了一個虛擬的bundle.js文件在記憶體上，並且在項目的根目錄中虛擬存在

 

 

另一種寫法

設定熱更新還有另一種寫法：

 

代碼：

var path = require('path')
var htmlwebpackplugin = require('html-webpack-plugin')
module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值為項目入口js
    },
    output: { //出口
        path:path.resolve('./src'),//相對轉絕對，設定一個輸出文件路徑
        filename: './bundle.js' //鍵名必須為filename，值為項目編譯好的js
    },
    plugins:[
        new htmlwebpackplugin({
            template:`./index.html` // html文件參照物，即開發環境下的html文件
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            }
        ]

    }
}
webpack.dev.config.js

 

 

package.json文件直接一個webpack  不用給任何參數：

 

"scripts": {
    "dev": "webpack-dev-server  --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },

 

 

npm run dev： 

 自動打開瀏覽器：

但是這種方式相對前面那個更有難度一點，效果一樣的

 

 

代碼打包

以上所有相關代碼打包整合：點我 （因為博客園文件限制最大為10M，我全部代碼打包已經超過了，所以node_modules文件自行初始化自行安裝第三方插件）

 

 

總結：

 

本節說了很多插件，有點繁瑣，但是基本都是後面會用到的，多看多熟悉

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [20190324]奇怪的GV$FILESPACE_USAGE視圖.txt
    [20190324]奇怪的GV$FILESPACE_USAGE視圖.txt--//發現GV$FILESPACE_USAGE定義很奇怪,做一個記錄.1.環境:SCOTT@book> @ ver1PORT_STRING VERSION BANNER x86_64/Linux 2.4.xx 11.2.0. ...
  • MySql優化分析
    原理 MYSQL邏輯分層 ：連接層 服務層 引擎層 存儲層 InnoDB(預設) ：事務優先 （適合高併發操作；行鎖） MyISAM ：性能優先 （表鎖） SQL優化 編寫過程： 解析過程： 索引分類 主鍵索引 ： 不能重覆。id 不能是null 唯一索引 ： 不能重覆。id 可以是null 單值索 ...
  • oppo設備怎麼樣無需root激活XPOSED框架的教程
    在非常多部門的引流或業務操作中，基本上都需要使用安卓的強大XPOSED框架，近期，我們部門購來了一批新的oppo設備，基本上都都是基於7.0以上版本，基本上都不能夠獲得root的su超級許可權，即使一部分能夠但比較麻煩，甚至也有獲得root的su超級許可權後重啟設備就恢復無root狀態的情況出現，很是憂 ...
  • oppo8.0系統怎麼無需Root激活Xposed框架的經驗
    在較多部門的引流，或業務操作中，基本都需要使用安卓的神一般的xposed框架，近期我們部門購來了一批新的oppo8.0系統，基本都都是基於7.0以上版本，基本都不能夠刷入root的su許可權，雖說一部分能夠但非常麻煩，甚至也有刷入root的su許可權後重啟設備就恢復無root狀態的情況出現，很是絕望的一 ...
  • oppo5.0以上系統怎麼樣不Root激活Xposed框架的經驗
    在非常多單位的引流或者業務操作中，基本上都需要使用安卓的黑高科技術Xposed框架，前幾天我們單位購來了一批新的oppo5.0以上系統，基本上都都是基於7.0以上版本，基本上都不能夠獲取root超級許可權，雖然有一些能但很是麻煩，甚至也有獲取root超級許可權後重啟設備就恢復無root狀態的情況發生，很 ...
  • Flutter 實現原理及在馬蜂窩的跨平臺開發實踐
    一直以來，跨平臺開發都是困擾移動客戶端開發的難題。 在馬蜂窩旅游 App 很多業務場景里，我們嘗試過一些主流的跨平臺開發解決方案， 比如 WebView 和 React Native，來提升開發效率和用戶體驗。但這兩種方式也帶來了新的問題。 比如使用 WebView 跨平臺方式，優點確實非常明顯。基 ...
  • v4v7升級到androidx過程
    因為原項目應用的都是v4v7包，谷歌改成androidx後就升級了一番，首先在properties文件 然後在菜單里點擊升級，studio會幫你把報名什麼的都改掉 打開項目，發現都自動改掉了，完美，然而做為一個android開發，我懷疑可能沒有那麼簡單，做好心理準備，我們不能太年輕了，應該成熟點了 ...
  • iOS 字典轉模型Model
    基本原理 利用 runtime 原理，獲取模型中所有實例變數列表，根據實例變數以此獲取模型中成員變數的名稱和屬性類型，區分Foundation和自定義屬性，需要對NSDictionary和NSArray類型做單獨處理。 下麵代碼是一個簡單的原理實現Demo，真正的框架中需要考慮很多問題，例如可以設置 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類