Export default the exported object cannot be deconstructed, and module Differences between exports

Recently in the process of doing the project , There's a problem , To a UI Components , Deconstruct the components we need , To register , But there was an error in the operation , I wrote a little example

//user.js
export default {
  obj:{name:1111},
  obj2:{name:22222},
}

// index.js
import {obj,obj2} from "./user.js"

console.log(obj,obj2)

An error is reported when the code is running and compiling

  Said he didn't find obj and obj2, Why is that ？

Now let's go into webpack Take a deep look at the principle of packaging , adopt import What is imported ？

Let's modify the code

//user.js
export default {
  obj:{name:1111},
  obj2:{name:22222},
}

// index.js
// index.js  page 
import user from "./user.js"
console.log(user)

adopt webpack Pack up , And let's see , After packing , stay main.js, hold index.js What does it look like to package and compile

  seen webpack Everyone who packages the source code knows , adopt import Import when packaging
import Will be replaced by __webapck_require_ Method , To get , Parameters 1 Because we now have two files , One is index.js, One is user.js, When packing , Will put them in an array ,1 The code is in the array index Location

We are console Input user, But after packaging, an object is returned to get the object default attribute ,

_user_js__WEBPACK_IMPORTED_MODULE_0__ This returns an object , We knew , Through export In the exported file , Returns a similar

var _user_js__WEBPACK_IMPORTED_MODULE_0__ = {
    default:...,
}

import user from "./user.js"

console.log(_user_js__WEBPACK_IMPORTED_MODULE_0__["default"])

user The value taken is the return object default Property value , But not directly in import Deconstruct here , Because he hasn't converted yet , We can assign values first , Deconstruction

import user from "./user.js"

let { obj, obj2 } = user

So we can deconstruct , because user What you get is the return object default The attribute value

We can also get the large object returned

// user.js
export default {
  obj:{name:1111},
  obj2:{name:22222},
}
export const name = ' Kobe '


// index.js
import * as user from "./user.js"

console.log(user)

Print it out and have a look , You can get all the objects

that export and module.exports What's the difference ？

module.exports The export of will be simple , Take a look webpack Of main.js file

    (() => {
      "use strict";
      __webpack_require__.r(__webpack_exports__);

      var _news_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

      var _news_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_news_js__WEBPACK_IMPORTED_MODULE_0__);

      console.log((_news_js__WEBPACK_IMPORTED_MODULE_0___default()))

    })();

adopt __webpack_require__ obtain news.js, Take a look __webpack_require__ The function returns

You can see  __webpack_require__ Back to you module.exports, Namely news Return that array

And then it calls again __webpack_require__.n Method

  Because we use module.exports, yes common.js, No __esModule, So go to the later function , So the return is still the original news.js Inside module.exports Array of