@dcasia/mini-program-tailwind-webpack-plugin - npm Package Compare versions

Comparing version 1.3.4 to 1.4.0

dist/dts/index.d.ts

@@ -7,4 +7,4 @@ import { Compiler, WebpackPluginInstance } from 'webpack';
     private options;
-    constructor(options: Options);
+    constructor(options?: Options);
     apply(compiler: Compiler): void;
 }

dist/dts/interfaces.d.ts

 import { WindiCssOptions } from '@windicss/config';
 import { TaroFramework } from './enum';
 export interface Options {
-    enableRpx: boolean;
-    designWidth: number;
+    enableRpx?: boolean;
+    designWidth?: number;
 }
@@ -7,0 +7,0 @@ export interface TaroWebpackPluginOptions {

package.json

 {
   "name": "@dcasia/mini-program-tailwind-webpack-plugin",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "让你的小程序用上原汁原味的 Tailwind/Windi CSS",
-  "keywords": ["miniprogram", "mini-program", "tailwindcss", "windicss", "wechat", "taro", "css", "postcss"],
+  "keywords": [
+    "miniprogram",
+    "mini-program",
+    "tailwindcss",
+    "windicss",
+    "wechat",
+    "taro",
+    "css",
+    "postcss",
+    "uni-app"
+  ],
   "main": "dist/index.js",
@@ -11,5 +21,6 @@ "files": [
   "exports": {
-      ".": "./dist/index.js",
-      "./taro": "./dist/taro.js",
-      "./universal-handler": "./dist/universal-handler.js"
+    ".": "./dist/index.js",
+    "./taro": "./dist/taro.js",
+    "./universal-handler": "./dist/universal-handler.js",
+    "./rollup": "./dist/rollup.js"
   },
@@ -19,4 +30,11 @@ "types": "dist/dts/index.d.ts",
     "*": {
-        "taro": ["dist/dts/taro/index.d.ts"],
-        "universal-handler": ["dist/dts/universal-handler.d.ts"]
+      "taro": [
+        "dist/dts/taro/index.d.ts"
+      ],
+      "universal-handler": [
+        "dist/dts/universal-handler.d.ts"
+      ],
+      "rollup": [
+        "dist/dts/rollup/index.d.ts"
+      ]
     }
@@ -36,3 +54,3 @@ },
   },
-  "author": "",
+  "author": "Ryan Wu <[e-mail]>",
   "license": "ISC",
@@ -58,2 +76,3 @@ "bugs": {
     "rollup-plugin-dts": "^4.2.1",
+    "vite": "^2.9.9",
     "webpack": "^5.69.1"
@@ -60,0 +79,0 @@ },

README.md

@@ -41,9 +41,9 @@ ![wechat-mp-plugin](https://user-images.githubusercontent.com/3030587/158826917-30c79222-b79d-4857-88f9-7e4184d1e771.jpg)
 
-<summary>⚙️ 针对以 Webpack 为构建工具的小程序</summary>
+<summary>⚙️ 针对常规 Webpack 类小程序（以 MPX 为例）</summary>
 
-### Webpack 类小程序（MPX）
+### 常规 Webpack 类小程序（以 MPX 为例）
 
 > [MPX](https://mpxjs.cn/), 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。
 
-MPX 框架为典型的以 Webpack 为构建工具的小程序框架，因此本篇安装示范以 MPX 项目为例。其余 Webpack 类小程序项目参考相同步骤进行安装即可。
+由于 MPX 框架为典型的以 Webpack 为构建工具的增强型小程序开发框架，所以本次安装示范将 MPX 项目作为典型案例来演示如何为大部分 Webpack 类小程序项目进行插件安装。**以下安装步骤在 Webpack 项目中具有广泛的通用性**，对于大部分 Webpack 类小程序项目只需参考相同步骤进行安装即可。
 
@@ -59,3 +59,3 @@ #### 安装 windicss-webpack-plugin
 >    
-> [Windi CSS Webpack 集成文档](https://windicss.org/integrations/webpack.html)
+> [Windi CSS Webpack 集成](https://windicss.org/integrations/webpack.html)
 > </details>
@@ -69,5 +69,24 @@
 
+#### 更新 webpack 配置文件
+
+使用 Webpack 插件
+
+```javascript
+//webpack.base.conf.js
+const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
+const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")
+
+module.exports = {
+  plugins: [
+    new WindiCSSWebpackPlugin(),
+    new MiniProgramTailwindWebpackPlugin({
+      // options
+    })
+  ]
+}
+```
+
 #### 新建 Windi CSS 配置文件
 
-在项目根目录新建 Windi CSS 配置文件
+在项目根目录新建 `windi.config.js` 配置文件
 
@@ -77,2 +96,3 @@ ```javascript
 export default {
+  preflight: false,
   prefixer: false,
@@ -99,28 +119,19 @@ extract: {
 
-#### 更新 webpack 配置文件
+#### 在入口文件中引入 Windi CSS 的产物
 
-使用 Webpack 插件
-
-```javascript
-//webpack.base.conf.js
-const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
-const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")
-
-module.exports = {
-  plugins: [
-    new WindiCSSWebpackPlugin(),
-    new MiniProgramTailwindWebpackPlugin({
-      // options
-    })
-  ]
-}
-```
-
-#### 在 app.mpx 中引入 Windi CSS 的产物
-
 ```html
-<style src="windi-utilities.css"></style>
+// app.mpx
+<style src="windi.css"></style>
 ```
   
-> 对于其余 Webpack 类小程序，可参考类似的方式在入口的样式文件中引入 `windi-utilities.wxss` 即可
+> 对于其余非 MPX 项目的 Webpack 类小程序，可参考类似的方式在入口文件中引入 `windi.css` 即可，如：
+> ```javascript
+> // main.js
+> import 'windi.css'
+> ``` 
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [引入 Windi CSS 样式文件](https://windicss.org/integrations/webpack.html#include-the-virtual-module)
+> </details>
 
@@ -180,3 +191,3 @@ #### 完成
 
-在项目根目录新建 Windi CSS 配置文件
+在项目根目录新建 `windi.config.js` 配置文件
 
@@ -205,6 +216,6 @@ ```javascript
 
-#### 在 app.js/app.ts 中引入 Windi CSS 的产物
+#### 在 app.js 中引入 Windi CSS 的产物
 
 ```javascript
-// app.js/app.ts
+// app.js
 import 'windi.css';
@@ -237,2 +248,106 @@ ```
 
+<summary>🔗 针对 uni-app 小程序</summary>
+
+### uni-app 小程序
+
+> [uni-app](https://uniapp.dcloud.net.cn/), 开发一次，多端覆盖。
+
+本篇内容包含 uni-app 的 Vue 2 与 Vue 3 两种安装示范。
+
+### Vue 2
+
+#### 安装 windicss-webpack-plugin
+
+```sh
+npm i windicss-webpack-plugin -D
+```
+
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [Windi CSS Webpack 集成](https://windicss.org/integrations/webpack.html)
+> </details>
+
+#### 安装 @dcasia/mini-program-tailwind-webpack-plugin
+
+```sh
+npm i @dcasia/mini-program-tailwind-webpack-plugin -D
+```
+
+#### 新建 Vue 配置文件
+
+在项目根目录新建 `vue.config.js` 配置文件并使用 Webpack 插件
+
+```javascript
+// vue.config.js
+const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
+const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")
+
+module.exports = {  
+  configureWebpack: {  
+    plugins: [  
+      new WindiCSSWebpackPlugin(),
+      new MiniProgramTailwindWebpackPlugin({
+        // options
+      })
+    ]  
+  }  
+}
+```
+
+#### 新建 Windi CSS 配置文件
+
+在项目根目录新建 `windi.config.js` 配置文件
+
+```javascript
+//windi.config.js
+export default {
+  preflight: false,
+  prefixer: false,
+  extract: {
+    // 忽略部分文件夹
+    exclude: ['node_modules', '.git', 'dist']
+  },
+  corePlugins: {
+    // 禁用掉在小程序环境中不可能用到的 plugins
+    container: false
+  }
+}
+```
+
+> 此处 Tailwind CSS 配置文件同样适用
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [Windi CSS 配置文件兼容规则](https://windicss.org/guide/configuration.html)
+> </details>
+
+#### 在 main.js 中引入 Windi CSS 的产物
+
+```javascript
+// main.js
+import 'windi.css'
+```
+
+#### 完成
+开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉
+
+#### 可配置参数
+
+| **名称**      | **类型**  | **默认** | **描述**                          |
+| ----------- | ------- | ------ | ------------------------------- |
+| enableRpx   | Boolean | true   | 是否开启自动转换至 rpx 单位值的功能            |
+| designWidth | Number  | 350    | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
+
+#### 案例
+> [集成案例：uni-app Vue 2 项目](https://github.com/dcasia/mini-program-tailwind/tree/development/examples/uni-app/vue-2)
+
+### Vue 3
+
+> 待更新...
+  
+</details>
+
+<details>
+
 <summary>🛠 针对原生开发或自定义构建的小程序</summary>
@@ -239,0 +354,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78782

increased by41.21%

Number of package files

20

increased by25%

Lines of code

1585

increased by53.88%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

450

increased by34.33%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes