javascript - export default 和 module.exports怎么用?

问题描述

问 题

最近想学着写点vue的插件,但是碰到模块输出的问题

如图上两段不同的代码,是我在网上找的,左边第②种写法就会报错,但是右边相同的写法都没事

报错:Cannot assign to read only property 'exports' of object '#<Object>'

附上完整的代码:

// 左边的

var plugin = {};
plugin.install = function(Vue) {
  if (plugin.installed) {
    return;
  }
  var get = function(a){console.log('Hello  ' +a)}
  Vue.prototype.who = get;
  Object.defineProperties(Vue.prototype, {
    $who: {
      get() {
        return {get:get}
      }
    }
  });
  Vue.mixin({
    created: function () {
      console.log('Plugin activiated')
    }
  })
};

// export default plugin;
module.exports = plugin;

---

// 右边的
/**
 * Created by Administrator on 2017-04-01.
 */

var Toast = {};
Toast.install = function (Vue, options) {
  var opt = {
    defaultType: 'bottom',
    duration: '2500'
  }
  for (var property in options) {
    opt[property] = options[property];
  }
  Vue.prototype.$toast = function (tips, type) {

    var curType = type ? type : opt.defaultType;

    if (document.querySelector('.lx-toast')) {
      // 如果toast还在，则不再执行
      return;
    }
    var toastTpl = Vue.extend({
      template: '<div class="lx-toast lx-toast-' + curType + '">' + tips + '</div>'
    });
    var tpl = new toastTpl().$mount().$el;
    document.body.appendChild(tpl);
    setTimeout(function () {
      document.body.removeChild(tpl);
    }, opt.duration)
  };
  ['bottom', 'center', 'top'].forEach(function (type) {
    Vue.prototype.$toast[type] = function (tips) {
      return Vue.prototype.$toast(tips, type)
    }
  });

  Vue.prototype.$loading = function (tips, type) {
    var load = document.querySelector('.lx-load-mark');

    if (type == 'close') {
      load && document.body.removeChild(load);
    } else {
      if (load) {
        // 如果loading还在，则不再执行
        return;
      }
      var loadTpl = Vue.extend({
        template: `
          <div class="lx-load-mark">
            <div class="lx-load-box">
              <div class="lx-loading">
                <div class="loading_leaf loading_leaf_0"></div>
                <div class="loading_leaf loading_leaf_1"></div>
                <div class="loading_leaf loading_leaf_"></div>
                <div class="loading_leaf loading_leaf_3"></div>
                <div class="loading_leaf loading_leaf_4"></div>
                <div class="loading_leaf loading_leaf_5"></div>
                <div class="loading_leaf loading_leaf_6"></div>
                <div class="loading_leaf loading_leaf_7"></div>
                <div class="loading_leaf loading_leaf_8"></div>
                <div class="loading_leaf loading_leaf_9"></div>
                <div class="loading_leaf loading_leaf_10"></div>
                <div class="loading_leaf loading_leaf_11"></div>
              </div>
              <div class="lx-load-content">${tips}</div>
            </div>
          </div>
          `
      });
      var tpl = new loadTpl().$mount().$el;
      document.body.appendChild(tpl);
    }
  };

  ['open', 'close'].forEach(function (type) {
    Vue.prototype.$loading[type] = function (tips) {
      return Vue.prototype.$loading(tips, type)
    }
  });
}
module.exports = Toast;

解决方案

新版 webpack 的一个 bug，用 export default 就好了

https://github.com/webpack/we...

这篇关于javascript - export default 和 module.exports怎么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！