webpack打包关于import/export和require/exports的错误

  webpack中在同一个文件里面不允许使用import语法引入模块的同时使用module.exports导出模块。这样会导致下面的错误，但是使用exports不会导致错误。

Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#<Object>’

直译：无法给对象的只读属性‘exports’赋值
从字面意思理解，webpack把exports转换成了一个只读属性。
测试一下

// index.js
import main from './main.js'
module.exports = {
  number: 10
}
//main.js
module.exports = {
  num: 10
}

执行webpack打包，
然后将index.js修改为正确的打包

import r from './main.js'
exports = {
  number: 10
}

两者打包结果进行对比，发现多了harmony-module 这个模块，可以看到，module.exports的exports属性被设置成了仅仅可以枚举，

// 格式化之后的  harmony-module
module.exports = function (originalModule) {
  if (!originalModule.webpackPolyfill) {
    var module = Object.create(originalModule);
    // module.parent = undefined by default
    if (!module.children)
      module.children = [];
    Object.defineProperty(module, "loaded", {
      enumerable: true,
      get: function () {
        return module.l;
      }
    });
    Object.defineProperty(module, "id", {
      enumerable: true,
      get: function () {
        return module.i;
      }
    });
    Object.defineProperty(module, "exports", {
      enumerable: true   // 设置为可以枚举，，defineProperty没有指定的会默认false
    });
    module.webpackPolyfill = 1;
  }
  return module;
};
//# sourceURL=webpack:///(webpack)/buildin/harmony-module.js

  所以在使用CommonJS和ES6的module这两种模块系统的时候尽量不要混着使用。

关于javascript的模块系统