博客更新地址啦～，歡迎訪問：https://jerryyuanj.github.io/blog

寫在前面

有過小程序開發經驗的都知道，在小程序的生態環境中，是很難做到像其他項目那樣完全的CI的，因為我們的上傳代碼是只能在IDE中操作且代碼是提交到微信服務器的，微信并沒有提供接口讓我們可以自動化部署代碼。
一個我們項目中比較常見的問題是，我們本地開發好后，如果想上傳代碼到騰訊服務器上，需要將本地的一些配置項修改成線上的版本，比如我們的接口地址，項目配置信息等。當然你可以手動去維護，但是不提倡，因為項目如果逐漸增大，業務邏輯變得復雜的話，涉及到的修改項會逐漸增多，手動維護，很難保證不會出錯，更有甚者會有人忘記修改直接提交然后苦苦找錯，很浪費時間。

這里給大家提供的方案，是我自己根據微信小程序有限的開放能力整理出來的。
廢話不多說，入題吧。

你需要會的

• node的基礎知識，這里主要用到的是文件的讀寫
• npm scripts
• 微信小程序的配置(project.config.json)

項目結構

項目初始化

如果你是使用IDE搭建的一個quick-start的小程序，那么你的目錄結構不是像我上面那樣的。你需要將你的項目調整為我上面的那樣，其中可以通過npm init -y來直接生成package.json文件。修改好以后，別忘了修改你的項目根目錄下的project.config.json，添加下面的配置項以指定你的源碼目錄，否則會編譯不會通過：

"miniprogramRoot": "src/",

添加npm腳本

在你的package.json中添加npm scripts，我這里只做演示，只添加了兩個環境的切換腳本，如下：

"scripts": {"switch:dev": "node switch.js --dev","switch:prod": "node switch.js --prod"},

可以看到，我們實際運行的是，項目根目錄下的switch.js文件來實現的，接下來我們來實現這個命令腳本。

實現腳本

實現的思路：

獲取命令行的參數，判斷是什么環境

根據環境的不同，選擇對應的dev目錄下的配置文件

進行文件的讀寫，將應該使用的配置文件中的配置寫入到/src/config.js下來

接下來是代碼實現，注釋寫的很詳細：

/*** 根據命令行運行參數，修改 /src/config.js 里面的項目配置信息* 即動態的將 /config/env 下的配置文件的內容寫入到 /src/config.js 中*/const fs = require('fs') const path = require('path') //源文件 const sourceFiles = {prefix: '/config/env/',dev: 'dev.json',prod: 'prod.json' } //目標文件 const targetFiles = [{prefix: '/src/',filename: 'config.js' }] const preText = 'module.exports = ' // 獲取命令行參數 const cliArgs = process.argv.splice(2) const env = cliArgs[0] // 判斷是否是 prod 環境 const isProd = env.indexOf('prod') > -1 ? true : false // 根據不同環境選擇不同的源文件 const sourceFile = isProd ? sourceFiles.prod : sourceFiles.dev // 處理數據 fs.readFile(__dirname + sourceFiles.prefix + sourceFile,(err, data) => {if (err) {throw new Error(`Error occurs when reading file ${sourceFile}.\nError detail: ${err}`)process.exit(1)}// 獲取源文件中的內容const targetConfig = JSON.parse(data)const {baseUrl} = targetConfig// 將獲取的內容寫入到目標文件中targetFiles.forEach(function(item, index) {let result = nullif (item.filename === 'config.js') {let config = {baseUrl: baseUrl}result = preText + JSON.stringify(config, null, 2)}// 寫入文件(這里只做簡單的強制替換整個文件的內容)fs.writeFile(__dirname + item.prefix + item.filename, result, 'utf8', (err) => {if (err) {throw new Error(`error occurs when reading file ${sourceFile}. Error detail: ${err}`)process.exit(1)}})})})

運行測試

我們先用一個簡單的配置來測試一下，假設我們本地開發和實際上線的項目中的請求的接口地址前綴是不一樣的，我們需要為dev和prod環境各提供一個baseUrl的配置項，修改配置文件：
/config/env/dev.json文件：

{"baseUrl": "dev server" }

/config/env/prod.json文件：

{"baseUrl": "prod server" }

此時假設我們/src/config.json文件中的代碼：

module.exports = {"baseUrl": "dev server" }

當我們項目需要上傳到騰訊服務器的時候，此時在項目根目錄下運行腳本：

npm run switch:prod

此時我們的/src/config.json文件會被修改成：

module.exports = {"baseUrl": "prod server" }

補充：我們可以在app.js中引入config.js文件，然后作為一個全局變量暴露出去，這樣我們就可以在每個page中通過getApp().globalData.config 來獲取這里的各項配置信息了。代碼：

const config = require('./config') App({onLaunch: function () { },globalData: {userInfo: null,config: config} })

與小程序配置文件中的鉤子(hooks)集合使用實現上傳時的配置信息自動修改

由于每次上傳代碼時都要自己運行npm腳本來切換環境配置，可能也會有點不方便，所以我們可以使用小程序給我提供的一些鉤子來實現自動運行腳本。
首先我們先打開配置項，輸入我們要運行的腳本：

這會在我們的project.config.json中生成如下的腳本，當然難你也可以手動的在這個文件中修改：

"scripts": {"beforeCompile": "node switch --dev","beforePreview": "","beforeUpload": "node switch --prod" }

這三個鉤子的對應含義可以在小程序官方文檔找到，可以自行參考。不過感覺很多開發者沒有用到過。汗。
這是我自己在項目中配置，雖然本地編譯的時候每次都會運行一下這個腳本，但是這一點的性能損失還是很微小的，不用care。

github

項目已經上傳至github，地址：https://github.com/JerryYuanJ/Jmemo。歡迎issue，如果對你有幫助，歡迎star。

總結

以上是生活随笔為你收集整理的微信小程序开发笔记1——使用npm脚本实现自动化切换环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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