小程序的簡化版 css-modules，比標準 css-modules 代碼量更少的優(yōu)化方案

css-modules 是一種 css 模塊化方案，它在構建過程中生成一個原類名與新類名的 map，根據(jù) map 引用樣式，通過設定 hash 規(guī)則，實現(xiàn)了對 CSS 類名作用域的限定，它通常用來解決頁面類名沖突的問題。由于微信小程序內組件樣式默認隔離，為什么要使用 css-modules 呢？

有以下 2 個原因：

• hash 化后可以實現(xiàn)更短的命名，減少代碼包體積
• 跨端項目需要兼顧非小程序環(huán)境，避免樣式?jīng)_突

weapp-css-modules 做了哪些事？

• 新類名單字母編排，減少代碼量
• 移除類名映射 map，替換 js 和 wxml 中變量為編譯后類名

標準 css-modules 方案：

import style from './index.wxss'
<view class="{{style.banner}}"></view>
.index_banner_xkpkl { xx }
module.exports ={'banner' : 'index_banner_xkpkl'} // 額外生成的 map 文件
復制代碼

weapp-css-modules 編譯后效果：

let style = {}
<view class="a"></view>
.a { xx }
復制代碼

目前只開發(fā)了適用于使用 gulp 編譯小程序的 gulp 插件，后續(xù)計劃開發(fā) webpack 可用的插件實現(xiàn)相同功能

npm i gulp-weapp-css-modules gulp-sort
復制代碼

// gulpfile.js
const { weappCssModule, wcmSortFn } = require('gulp-weapp-css-modules')
const sort = require('gulp-sort');

gulp.task('css-module', () => {
    return gulp.src('./src/**/*')
        .pipe(sort(wcmSortFn))      // 由于處理文件有順序依賴，需要先對文件排序
        .pipe(weappCssModule())
        .pipe(gulp.dest('./dist'))
})
復制代碼

小程序頁面不具備隔離功能，因此只有具備樣式隔離的 Component 可以改造使用 weapp-css-modules

1、css 文件改名字: weapp-css-modules 通過 css 文件是否帶 module 來識別需要替換的內容

index.wxss -> index.module.wxss

// 或者使用 scss/其他

index.scss -> index.module.scss

2、js 內新增樣式文件的引入，目的是建立 css-modules 的樣式與 js 關系

import styles from './index.module.wxss

data:{
   ...,
   styles:styles
}
復制代碼

3、修改 js 內類名的地方替換為 styles 的間接引入

query.select('.banner')
.boundingClientRect()
.exec(function (res) {...})

// 改為
query.select('.' + styles['banner'])
.boundingClientRect()
.exec(function (res) {...})
復制代碼

4、修改 wxml 內類名的使用

4.1. 普通類名

<view class="banner"></view>
// 改為
<view class="{{styles.banner}}"></view>
// 或者
<view class="{{styles['banner']}}"></view>
復制代碼

4.2. 三目運算符

<view class="banner__dot {{ 'banner__dot--' + (index == swiperCurrent ? 'cur' : '')}"></view>

// 改為
<view class="{{styles['banner__dot'] + ' ' + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>
// 或者
<view class="{{`${style['banner__dot']} ${index == swiperCurrent ? style['banner__dot--cur'] : ''}`}}"></view>
復制代碼

這里需要注意幾種有問題的寫法：

4.2.1. 類名間未加空格

<view class="{{styles['banner__dot'] + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>
復制代碼

4.2.2. 三目表達式未加括號，運算優(yōu)先級不明

<view class="{{styles['banner__dot'] + ' ' + index == swiperCurrent ? styles['banner__dot--cur'] : ''}}"></view>
復制代碼

4.2.3. styles 的屬性需要是具體的字符串，不能使用變量表達式(這是 weapp-css-modules 需要單獨關注的地方，因為編譯階段會對 styles.xx 進行求值，所以不能把表達式寫在屬性位置)

<view class="{{styles['banner__dot'] + ' ' + styles[index == swiperCurrent ? 'banner__dot--cur': '']}}"></view>
復制代碼

5、構建過程中關注腳本的紅色提示，類似于這種：

這是由于在 js/wxml 內使用了一個banner__swiper_2,而 css 內并沒有定義banner__swiper_2，css-module 編譯的 map 文件是根據(jù) css 內的樣式定義來生成 key 名的，因此styles['banner__swiper_2']是undefined, 針對這種情況有兩種處理方式：

5.1. 如果 js 內需要通過這個類名選擇到某個元素，但是 css 內不需要編寫樣式，那么可以將它視為不需要編譯的類名，即：

query.selector('.banner__swiper_2') // 不改成 styles.xx 的寫法
<view class="banner__swiper_2"></view> // 相應的元素也不索引到 styles
// 這樣實現(xiàn)了一個組件內不會被編譯的樣式
復制代碼

5.2. 如果 js 內無引用，那么刪掉 wxml 內該類名的定義吧～

6、構建完進行檢查，關注樣式和交互是否正常

• gulp 項目：路徑 /demo/gulp-project-demo