commonjs
module.exports
代码语言：javascript复制//profile.js
function sang() {
console.log('I can sang');
}
var hobby = 'rap'
// module.exports导出的是一个对象
module.exports = { sang, hobby, eat: '吃饭' }//app.js
var profile = require('./mode/profile')
console.log(profile); // { sang: [Function: sang], hobby: 'rap', eat: '吃饭' }
console.log(profile.sang); // [Function: sang]
console.log(profile.hobby); // rap
console.log(profile.eat); // 吃饭
console.log('============================');
var { sang, hobby, eat } = require('./mode/profile')
console.log(sang, hobby, eat); // [Function: sang] 'rap' '吃饭'exports
代码语言：javascript复制//user.js
const name = 'Node'
function hello() {
console.log('hello node');
}
const sayhello = () => {
console.log('I can sayhello');
}
exports.hi = hello
exports.say = sayhello
exports.name = name
exports.bye = () => {
console.log('bye node');
}//app.js
const user = require('./mode/user')
console.log(user); //{hi: [Function: hello],say: [Function: sayhello],name: 'Node',bye: [Function]}
console.log(user.name); //Node
console.log('============================');
const { hi, say, name, bye } = require('./mode/user')
console.log(hi, say, name, bye);//[Function: hello] [Function: sayhello] 'Node' [Function]
hi() //hello node
say() //I can sayhello
bye() //bye node
console.log(name); //Noderequire
使用 const ... = require('路径') 即可导入
两者区别
module对象的exports属性是exports对象的一个引用；也就是说 module.exports = exports exports可以理解为是module.exports的简写，module.exports 初始值为一个空对象 {}，而exports指向的是module.exports的引用，最后return的不是exports，而是module.exports
es6
export
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- es6模块化需要添加：type="module" -->
<script src="./app.js" type="module"></script>
</body>
</html>写法1
代码语言：javascript复制// es6模块化 user.js
export var name = 'tom'
export var sex = 'boy'
export function sayhello() {
console.log('我会sayhello');
}// es6模块化 app.js
import { name, sex, sayhello } from './mode/user.js';
console.log(name) //tom
console.log(sex) //boy
console.log(sayhello) //ƒ sayhello() {console.log('我会sayhello');}写法2
代码语言：javascript复制// es6模块化 hobby.js
var hobbyName = 'vue'
var hobby = function () {
console.log('code');
}
export { hobbyName, hobby }// es6模块化 app.js
import { hobbyName, hobby } from './mode/hobby.js';
console.log(hobbyName); //vue
console.log(hobby); //ƒ () {console.log('code');}写法3
代码语言：javascript复制// es6模块化 app.js
import { name, sex, sayhello } from './mode/user.js';
import { hobbyName, hobby } from './mode/hobby.js';
console.log(name) //tom
console.log(sex) //boy
console.log(sayhello) //ƒ sayhello() {console.log('我会sayhello');}
console.log('===========');
console.log(hobbyName); //vue
console.log(hobby); //ƒ () {console.log('code');}export default
代码语言：javascript复制// es6模块化 token.js
var password = '12346'
var sang = () => {
console.log('I can sang');
}
export default { password, sang }// es6模块化 app.js
import token from './mode/token.js';
// import { password } from './mode/token.js'; //报错，token里面并没有导出password，既没有export var password = 123
console.log(token); //{password: "12346", sang: ƒ}export和export default混合
代码语言：javascript复制// es6模块化 token.js
var password = '12346'
var sang = () => {
console.log('I can sang');
}
export var rapper = 'cxk'
export default { password, sang }// es6模块化 app.js
import token from './mode/token.js';
import { rapper } from './mode/token.js';
console.log(token); //{password: "12346", sang: ƒ}
console.log(rapper); //'cxk'// es6模块化 app.js
import token, { rapper } from './mode/token.js';
console.log(token); //{password: "12346", sang: ƒ}
console.log(rapper); //'cxk'import
使用 import ... from '路径' 即可导入
// es6模块化 myReact.js
var myReact = {
name: 'hss-react',
Component: function () {
console.log('hss-Component');
}
}
export var hello = 'hello world'
export var Component = myReact.Component
export default myReact// es6模块化 app.js
import react1 from './mode/myReact.js';
import * as react2 from './mode/myReact.js';
console.log(react1); //{name: "hss-react", Component: ƒ}
console.log(react2); //{Component: ƒ (),default: Object,hello: "hello world"}
console.log(react1 === react2); //false
console.log(react2.default === react1); //true// es6模块化 app.js
import react1, * as all from './mode/myReact.js';
console.log(react1);
console.log(all);
console.log(react1 === all.default); //truetypescript
import React,{Component} from 'react'
react源码里使用typescript编写
allowSyntheticDefaultImports
允许对不包含默认导出的模块使用默认导入。这个选项不会影响生成的代码，只会影响类型检查。
export = foo 是 ts 为了兼容 commonjs 创造的语法，它对应于 commonjs 中的 module.exports = foo。
在 ts 中，如果要引入一个通过 export = foo 导出的模块，标准的语法是 import foo = require('foo')，或者 import * as foo from 'foo'。
但由于历史原因，我们已经习惯了使用 import foo from 'foo'。
这个选项就是为了解决这个问题。当它设置为 true 时，允许使用 import foo from 'foo' 来导入一个通过 export = foo 导出的模块。当它设置为 false 时，则不允许，会报错。
当然，我们一般不会在 ts 文件中使用 export = foo 来导出模块，而是在写（符合 commonjs 规范的）第三方库的声明文件时，才会用到 export = foo 来导出类型。
export = React;
export as namespace React;import React, { Component } from 'react';
import * as React1 from 'react';
console.log(React === React1.default); //true
console.log(React1.default === React1); //true
console.log(React === React1); //true，得出结论，react里面只导出了一个默认的React！
console.log(React.default); //undefined
console.log(React.Component === Component); //true
console.log(React1.Component === Component); //true参考
https://juejin.cn/post/6844903763958841357
https://hardocs.com/d/typescript-tutorial/engineering/compiler-options.html#allowsyntheticdefaultimports
