前端模块化

hss

发布于 2022-02-25 20:06:42

4020

发布于 2022-02-25 20:06:42

commonjs

module.exports

//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

//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);  //Node

require

使用 const ... = require('路径') 即可导入

两者区别

module对象的exports属性是exports对象的一个引用；也就是说 module.exports = exports exports可以理解为是module.exports的简写，module.exports 初始值为一个空对象 {}，而exports指向的是module.exports的引用，最后return的不是exports，而是module.exports

es6

export

<!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

// 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

// 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

// 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

// 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混合

// 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);    //true

typescript

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