1. 修复plupload instance 污染问题

2. 引入 babel 编译

Author: mm-sam

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /.vscode
 /package-lock.json
+/.idea

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+      "@babel/preset-env"
+  ],
+  compact: true
+};

dist/vue-plupload.js

@@ -1,12 +1,12 @@
-var gulp = require('gulp');
-var sourcemaps = require('gulp-sourcemaps');
-var vueify = require("vueify");
-var rename = require("gulp-rename");
-var uglify = require('gulp-uglify');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var gutil = require('gulp-util');
-var browserify = require('browserify');
+const gulp = require('gulp');
+const sourcemaps = require('gulp-sourcemaps');
+const vueify = require("vueify");
+const uglify = require('gulp-uglify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const gutil = require('gulp-util');
+const browserify = require('browserify');
+const babel = require('gulp-babel');
 
 
 gulp.task('set-dev-node-env', function() {
@@ -20,7 +20,7 @@ gulp.task('set-prod-node-env', function() {
 
 gulp.task('vueify', ["set-prod-node-env"], function() {
      // set up the browserify instance on a task basis
-    var b = browserify({
+    let b = browserify({
         entries: './index.js',
         debug: false,
         transform: ["vueify"],
@@ -34,16 +34,19 @@ gulp.task('vueify', ["set-prod-node-env"], function() {
         .pipe(source('vue-plupload.js'))
         .pipe(buffer())
         .pipe(sourcemaps.init({loadMaps: true}))
-            // Add transformation tasks to the pipeline here.
-            .pipe(uglify())
-            .on('error', gutil.log)
+        .pipe(babel({
+            presets: ['@babel/preset-env']
+        }))
+        // Add transformation tasks to the pipeline here.
+        .pipe(uglify())
+        .on('error', gutil.log)
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest("dist"));
 });
 
 gulp.task("sample", ["set-dev-node-env"], function() {
     // set up the browserify instance on a task basis
-    var b = browserify({
+    let b = browserify({
         entries: './index.js',
         debug: true,
         transform: ["vueify"],
@@ -59,13 +62,13 @@ gulp.task("sample", ["set-dev-node-env"], function() {
         .pipe(gulp.dest("docs"));
 });
 
-gulp.task("dev", function() {
-    var watcher = gulp.watch('./src/*.vue', ['sample']);
+gulp.task("dev", ["sample"],function() {
+    let watcher = gulp.watch('./src/*.vue', ['sample']);
     watcher.on('change', function(event) {
         console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
     });
 });
 
 
 
-gulp.task("default", ["vueify"])
+gulp.task("default", ["vueify"]);

dist/vue-plupload.js.map

@@ -22,15 +22,16 @@
     },
     "homepage": "https://github.com/mm-sam/vue-plupload#readme",
     "dependencies": {
-        "lodash": "^4.17.4",
         "lodash.merge": "^4.6.0",
         "plupload": "^2.3.2",
         "vue": "^1.0.28"
     },
     "devDependencies": {
+        "@babel/core": "^7.7.2",
+        "@babel/preset-env": "^7.7.1",
         "browserify": "^14.4.0",
         "gulp": "^3.9.1",
-        "gulp-rename": "^1.2.2",
+        "gulp-babel": "^8.0.0",
         "gulp-sourcemaps": "^2.6.0",
         "gulp-uglify": "^3.0.0",
         "gulp-util": "^3.0.8",

gulpfile.js

@@ -1,5 +1,5 @@
 <template>
-    <input v-el:btn class="{{class}}" value="{{text}}" type="button" />
+    <input v-el:btn :class="class" :value="text" type="button" />
 </template>
 <style>
 .plupload-btn {
@@ -23,11 +23,11 @@
 }
 </style>
 <script>
-var Vue = global.Vue || require("vue");
-var plupload = require("plupload");
-var _ = require('lodash');
+const Vue = global.Vue || require("vue");
+const plupload = require("plupload");
+const merge = require('lodash.merge');
 
-var uploaderDefaultOption = {
+const uploaderDefaultOption = {
     runtimes: 'html5,html4'
 };
 
@@ -64,60 +64,53 @@ module.exports = Vue.extend({
     watch : {
         "options" : {
             handler: function(val, oldVal) {
-                var self = this;
-                
-                if (!self.uploader) {
-                    self.renderPlupload();
+                if (!this.uploader) {
+                    this.renderPlupload();
                 } else {
-                    var opt = self.mergeOptions(val);
-                    self.uploader.setOption(opt);
+                    let opt = this.mergeOptions(val);
+                    this.uploader.setOption(opt);
                 }
-                
-                console.log("options change!");
-                console.log(val)
             },
             deep: true
         }
     },
     
     methods: {
         mergeOptions: function(val) {
-            var self = this;
-        
-            return _.merge(uploaderDefaultOption, val, {
-                browse_button: self.$els.btn
+            return merge(uploaderDefaultOption, val, {
+                browse_button: this.$els.btn
             });
         },
         renderPlupload: function() {
-            var self = this;
+            let self = this;
 
-            Vue.nextTick(function () {
+            Vue.nextTick(() => {
 
-                var opt = self.mergeOptions(self.options);
+                let opt = this.mergeOptions(this.options);
 
-                self.uploader = new plupload.Uploader(opt);
+                this.uploader = new plupload.Uploader(opt);
 
-                self.uploader.bind("PostInit", function(uploader){
+                this.uploader.bind("PostInit", function(uploader){
                     self.$emit("init", uploader);
                 });
-                
-                self.uploader.bind("FilesAdded", function(up, files){
+
+                this.uploader.bind("FilesAdded", function(up, files){
                     self.$emit("added", up, files);
                 });
-                
-                self.uploader.bind("UploadProgress", function(up, file){
+
+                this.uploader.bind("UploadProgress", function(up, file){
                     self.$emit("progress", up, file);
                 });
-                
-                self.uploader.bind("FileUploaded", function(up, file, result){
+
+                this.uploader.bind("FileUploaded", function(up, file, result){
                     self.$emit("uploaded", up, file, result);
                 });
-                
-                self.uploader.bind("Error", function(up, err){
+
+                this.uploader.bind("Error", function(up, err){
                     self.$emit("error", up, err);
                 });
-                
-                self.uploader.init();
+
+                this.uploader.init();
 
             });
         }