feat: support wepy2.x

huixisheng · Oct 24, 2018 · 727b73a · 727b73a
1 parent 8da8c50
commit 727b73a
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,27 @@
 # wepy-plugin-image
 
-> wepy插件根据图片大小转base64或者上传七牛
+> 支持wepy2插件根据图片大小转base64或者上传七牛
 
 ## 配置 ##
 
 [pack-qiniu配置](https://github.com/huixisheng/pack-qiniu)
 
+## 0.1.x
+> 支持wepy2.x
+
+```
+const wepyPluginImage = require('wepy-plugin-image');
+
+// `wepy.config.js`
+module.exports = {
+  plugins: [
+    wepyPluginImage,
+  ],
+```
+
+## 0.0.x
+> 支持`wepy1.7.x`
+
 `wepy.config.js`
 
 ```

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wepy-plugin-image",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "wepy插件根据图片大小转base64或者上传七牛",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const mime = require('mime');
 // TODO key 没有配置的提示
+// TODO 其他平台的cdn支持 又拍云、阿里云等
 const packQiniu = require('pack-qiniu');
 const validator = require('validator');
 
@@ -14,95 +15,101 @@ class ImageParse {
     }, cfg);
   }
 
-  apply(op) {
-    const { code, file } = op;
+  apply(node, ctx) {
+    // const { code, file } = op;
+    let code = node.compiled.code;
+    const file = ctx.file;
+
     const config = this.config;
-    const { debugMode, lessRootpath } = config;
+    const { debugMode } = config;
     if (debugMode) {
       console.log('\nwepy-plugin-image file:', file);
-      console.log('lessRootpath', lessRootpath);
+      // console.log('lessRootpath', lessRootpath);
     }
 
     const reg = /url\((.*?)\)/gi;
     if (!code) {
       if (debugMode) {
         console.error('code is null');
       }
-      op.next();
-    } else {
-      const bgPaths = code.match(reg) || [];
-      if (debugMode) {
-        console.log('wepy-plugin-image bgPaths:\n', bgPaths);
-      }
+      return Promise.resolve({ node, ctx });
+    }
+    const bgPaths = code.match(reg) || [];
+    if (debugMode) {
+      console.log('wepy-plugin-image bgPaths:\n', bgPaths);
+    }
 
-      const base64List = [];
-      const uploadList = [];
-      bgPaths.forEach((item) => {
-        const bgImage = item.replace(/'/g, '').replace(/"/g, '').replace('url(', '').replace(/\)$/g, '');
-        // 本身是绝对地址
-        let bgPath = bgImage;
+    const base64List = [];
+    const uploadList = [];
+    bgPaths.forEach((item) => {
+      const bgImage = item.replace(/'/g, '').replace(/"/g, '').replace('url(', '').replace(/\)$/g, '');
+      // 本身是绝对地址
+      let bgPath = bgImage;
 
-        // 绝对地址不存在，使用去除lessRootpath地址的相对地址
-        if (!fs.existsSync(bgPath)) {
-          bgPath = path.join(path.dirname(file.replace('dist', 'src')), bgImage.replace(lessRootpath, ''));
-        }
+      // 绝对地址不存在，使用去除lessRootpath地址的相对地址
+      // if (!fs.existsSync(bgPath)) {
+      //   bgPath = path.join(path.dirname(file.replace('dist', 'src')), bgImage.replace(lessRootpath, ''));
+      // }
 
-        // less使用e('')传递的路径
-        if (!fs.existsSync(bgPath)) {
-          bgPath = path.join(path.dirname(file.replace('dist', 'src')), bgImage);
-        }
+      // less使用e('')传递的路径
+      if (!fs.existsSync(bgPath)) {
+        bgPath = path.join(path.dirname(file.replace('dist', 'src')), bgImage);
+      }
 
-        if (debugMode) {
-          console.log('bgPath:', bgPath);
-        }
+      if (debugMode) {
+        console.log('bgPath:', bgPath);
+      }
 
-        if (!fs.existsSync(bgPath) && debugMode) {
-          console.error('%s不存在', bgPath);
-        }
-        if (!validator.isURL(bgImage) && fs.existsSync(bgPath)) {
-          const stats = fs.statSync(bgPath);
-          if (stats.size > config.limit) {
-            uploadList.push({
-              path: bgPath,
-              bg: bgImage,
-            });
-          } else {
-            base64List.push({
-              path: bgPath,
-              bg: bgImage,
-            });
-          }
+      if (!fs.existsSync(bgPath) && debugMode) {
+        console.error('%s不存在', bgPath);
+      }
+      if (!validator.isURL(bgImage) && fs.existsSync(bgPath)) {
+        const stats = fs.statSync(bgPath);
+        if (stats.size > config.limit) {
+          uploadList.push({
+            path: bgPath,
+            bg: bgImage,
+          });
+        } else {
+          base64List.push({
+            path: bgPath,
+            bg: bgImage,
+          });
         }
-      });
+      }
+    });
 
-      base64List.forEach((base64file) => {
-        const base64Content = fs.readFileSync(base64file.path).toString('base64');
-        const mimeType = mime.getType(base64file.path);
-        const data = `data:${mimeType};base64,${base64Content}`;
-        op.code = op.code.replace(base64file.bg, `${data}`);
-      });
+    base64List.forEach((base64file) => {
+      const base64Content = fs.readFileSync(base64file.path).toString('base64');
+      const mimeType = mime.getType(base64file.path);
+      const data = `data:${mimeType};base64,${base64Content}`;
+      if (debugMode) {
+        console.log('base64 replace');
+      }
+      code = code.replace(base64file.bg, `${data}`);
+    });
 
-      const promiseUploadList = [];
-      uploadList.forEach((uploadfile) => {
-        promiseUploadList.push(packQiniu(uploadfile.path, uploadfile));
-      });
-      // 无图片的时候
-      if (!promiseUploadList.length) {
-        if (debugMode) {
-          console.log('wepy-plugin-image no upload image');
-        }
-        op.next();
-        return;
+    const promiseUploadList = [];
+    uploadList.forEach((uploadfile) => {
+      promiseUploadList.push(packQiniu(uploadfile.path, uploadfile));
+    });
+    // 无图片的时候
+    if (!promiseUploadList.length) {
+      if (debugMode) {
+        console.log('wepy-plugin-image no upload image');
       }
-      Promise.all(promiseUploadList).then((resultList) => {
-        resultList.forEach((item) => {
-          const bgUrl = item.options.bg;
-          const uploadUrl = item.url.replace('http://', 'https://');
-          op.code = op.code.replace(bgUrl, uploadUrl);
-        });
-        op.next();
-      });
+      node.compiled.code = code;
+      return Promise.resolve({ node, ctx });
     }
+    return Promise.all(promiseUploadList).then((resultList) => {
+      resultList.forEach((item) => {
+        const bgUrl = item.options.bg;
+        const uploadUrl = item.url.replace('http://', 'https://');
+        code = code.replace(bgUrl, uploadUrl);
+      });
+      node.compiled.code = code;
+      return Promise.resolve({ node, ctx });
+    });
 
     // var pathFile = _path2.default.join(path.dirname(file.replace('dist', 'src')), imgPath);
     //   { type: 'css',
@@ -115,4 +122,51 @@ class ImageParse {
   }
 }
 
-module.exports = ImageParse;
+// eslint-disable-next-line
+exports = module.exports = function (options = {}) {
+  this.register('before-wepy-parser-style', ({ node, ctx }) => {
+    if (options.debugMode) {
+      console.log('before-wepy-parser-style', ctx.file);
+    }
+
+    const wepyPluginImageInstance = new ImageParse(options);
+    return wepyPluginImageInstance.apply(node, ctx);
+
+    // node
+    //   { type: 'style',
+    //   content: '\n.groupitem {\n}\n',
+    //   start: 19,
+    //   attrs: { type: 'less' },
+    //   end: 35,
+    //   lang: 'css',
+    //   compiled: { code: '\n.groupitem {\n}\n' } }
+
+    // ctx
+    // { file: '/Users/huixisheng/Mzxd/mxj-fe/wepy2-mall/src/components/groupitem.wpy',
+    //   sfc:
+    //    { template:
+    //       { type: 'template',
+    //         content: '\n<div class="groupitem">\n  --<span class="id">{{gitem.childid}}.</span>\n  <span class="name" @tap="tap"> {{gitem.childname}}</span>\n</div>\n',
+    //         start: 54,
+    //         attrs: {},
+    //         end: 201,
+    //         lang: 'wxml',
+    //         compiled: [Object],
+    //         parsed: [Object] },
+    //      script:
+    //       { type: 'script',
+    //         content: '//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport wepy from \'@wepy/core\';\n\nwepy.component({\n  props: {\n    gitem: {}\n  },\n  data: {\n  },\n  methods: {\n    tap () {\n      this.gitem.childname = `Child Random(${Math.random()})`\n      let index = this.$parent.$children.indexOf(this);\n      console.log(`Item ${index}, ID is ${this.gitem.childid}`)\n    }\n  }\n});\n',
+    //         start: 221,
+    //         attrs: {},
+    //         end: 568,
+    //         lang: 'babel',
+    //         compiled: [Object],
+    //         parsed: [Object] },
+    //      styles: [ [Object] ],
+    //      customBlocks: [],
+    //      config: { parsed: [Object] } },
+    //   type: 'normal',
+    //   npm: false,
+    //   component: true }
+  });
+};