JS中ESModule和commonjs介绍及使用区别

    // 命名导出
    export const b = 'b'
    // 默认导出
    export default {
      a: 1
    };

    const c = 'c'
    export { c }
    
    // 以上内容会合并导出，即导出为： {b:'b', c:'c', default: {a:1}}

  export {
    default as function1,
    function2,
  } from 'bar.js';

  // 等价于
  import { default as function1, function2 } from 'bar.js';
  export { function1, function2 };

export DefaultExport from 'bar.js'; // Invalid

export { default as DefaultExport } from 'bar.js'; // valid

    // test.js
    export const b = 'b'     // 命名导出
    export default {    // 默认导出
      a: 1
    };

    // index.js
    import { b, default as _defaultModule } from './test.js'
    import defaultModule from './test.js'
    import * as allModule from './test.js'

    console.log('name export', b) // 'b'
    console.log('default export', defaultModule) // {a:1}
    console.log(_defaultModule === defaultModule) // true
    console.log('all export', allModule) // {b:'b', default: {a:1}}

    // test.js
    export default {    // 默认导出
      a: 1
    };

    // index.js
    import { a } from './test.js'
    console.log('name export', a) // undefined

    // index.js
    import defaultModule from './test.js'
    import * as allModule from './test.js'
    console.log('default export', defaultModule) // {a:1}
    console.log('all export', allModule) // {default: {a:1}}

  true && import test from "./a.js";
  // SyntaxError: import can only be used in import() or import.meta
  // 这里应该是把import当成了动态引入而报错

  // a.js
  const test = {
    a: 1
  };
  export default test;
  // 改动模块内部的值
  setTimeout(() => {
    test.a = 2;
  }, 1000);

  // index.js
  import test from './index.js'

  /* live bindings */
  console.log(test) // {a:1}
  setTimeout(()=>{
    console.log(test) // {a:2}
  }, 2000)

  /* read-only */
  test= { a: 3 } // 报错, Error: "test" is read-only.

  /* syntactically rigid */
  if(true){
    import test from './index.js' // 报错, SyntaxError: 'import' and 'export' may only appear at the top level
  }

// nodejs内部
exports = module.exports

console.log(exports, module.exports) // {}, {}
console.log(exports === module.exports) // true

// ✅使用exports
exports.a = xxx
console.log(exports === module.exports) // true

// ✅等价于
module.exports.a = xxx

// ✅这么写可以导出，最终导出的是{a:'1'}
module.exports = {a:'1'}

console.log(exports, module.exports) // {}, {a:'1'}
console.log(exports === module.exports) // false


// ❌不会将{a:'1'}导出，最终导出的是{}
exports = {a:'1'}

console.log(exports, module.exports) // {a:'1'}, {}
console.log(exports === module.exports) // false

// a是test.js里module.exports导出的部分
const a = require('./test.js')

function require(/* ... */) {
  const module = { exports: {} };
  ((module, exports) => {
    // Module code here. In this example, define a function.
    function someFunc() {}
    exports = someFunc;
    // At this point, exports is no longer a shortcut to module.exports, and
    // this module will still export an empty default object.
    module.exports = someFunc;
    // At this point, the module will now export someFunc, instead of the
    // default object.
  })(module, module.exports);
  return module.exports;
}

// test.js
let test = {a:'1'}
setTimeout(()=>{
  test = {a:'2'}
},1000)
module.exports = test

// index.js
const test1 = require('./test.js')
console.log(test1) // {a:1}
setTimeout(()=>{
  console.log(test1) // {a:1}
},2000)