原创 用rxjs實現小程序狀態管理

前言 用vue和react做開發,我們經常選擇vuex,redux一類的狀態管理工具來輔助管理狀態,狀態邏輯複雜的微信小程序,如果有狀態管理工具的話,可以極大地提高開發效率和可維護性。 想象這樣一個場景,一個用戶修改了用戶名,小程序中有十多

原创 讓你的小程序支持多環境打包

開發小程序時,最麻煩的事情莫過於在上線前需要反覆切換測試和正式環境接口地址。 本文介紹一種小程序工程化改造的思路,基於這個我們能夠實現小程序自動根據多環境打包。 參考項目 https://github.com/mecoepcoo/minip

原创 讓mocha支持ES6模塊

mocha是比較常用的node測試框架,但是隻支持commonjs模塊,要讓mocha支持ES6模塊,需要babel的幫助。 書寫本文時用到的工具版本爲: babel v7 mocha v6.2 安裝依賴 $ npm i -D @b

原创 從零搭建webpack4+react+typescript+eslint腳手架(四)

配置webpack開發服務器 打包用的配置基本完成了,現在我們來配置一下開發環境。 首先處理通用配置config.js: module.exports = { // ...configs devServer: { port:

原创 從零搭建webpack4+react+typescript+eslint腳手架(五)

這一篇主要介紹代碼規範相關的內容。 eslint 我們通常使用lint工具來檢查代碼不規範的地方,以下是將 eslint、typescript 和 webpack 結合使用的例子。 首先安裝依賴: $ npm i -D eslint bab

原创 從零搭建webpack4+react+typescript+eslint腳手架(六)

本篇是前文的擴展延伸。 美化webpack輸出信息 webpack在開發時的輸出信息有一大堆,可能會干擾我們查看信息,以下提供一個美化、精簡輸出信息的建議。 精簡以下開發服務器輸出信息,修改webpack.dev.js: // ...web

原创 從零搭建webpack4+react+typescript+eslint腳手架(三)

處理靜態資源 js的打包基本處理完了,還有圖片、音頻等靜態資源需要處理。 依然先裝依賴: $ npm i -D url-loader file-loader $ npm i -D @svgr/webpack # 順帶支持一下導入svg圖片

原创 從零搭建webpack4+react+typescript+eslint腳手架(二)

完善webpack打包配置 有了webpack的基礎配置,還不足以支持打生產環境能夠使用的包,我們還需要增加一些配置。 首先,每次打包前最好能把上一次生成的文件刪除,這裏可以用clean-webpack-plugin插件實現: $ npm

原创 從零搭建webpack4+react+typescript+eslint腳手架(一)

引言 項目github倉庫地址: https://github.com/mecoepcoo/ts-react-boilerplate 這個系列的文章主要講述如何從一個空目錄建立webpack+react+typescript+eslint