美文网首页
JS中模块的暴露和引入方式

JS中模块的暴露和引入方式

作者: 爱吃馒头不吃辣 | 来源:发表于2020-04-23 16:49 被阅读0次

export和export default:

        在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过import语句使用它们。
        能够在每一个模块中定义多个export 命名导出,但是只允许有一个export default 默认导出。

export命名导出(每个模块包含任意数量):

//my-module.js

//导出列表
let a = 1, b = 2;
export {a, b}

// 导出单个特性
export let name1, name2;
export let name1 = 1, name2 = 2;
export function FunctionName(){...}
export class ClassName {...}

//重命名导出
export {a as aa,b as bb};

// 解构导出并重命名
export const { name1, name2: bar } = o;

import语句使用命名导出:

import { a, b,FunctionName } from 'my-module.js';

export default默认导出(每个模块包含一个):

//my-module.js

// 默认导出
export default expression;
export default function (…) { … } 
export default function nameInfo(…) { … } 
export { name1 as default, … };
        更多详细信息可查询这里官方文档

exports和module.exports:

        exports允许使用快捷方式,因此module.exports.f = ...可以更简洁地写成exports.f = ...。但是,就像任何变量一样,如果为exports赋予了新值,则它将不再绑定到module.exports
        能够在每一个模块中定义多个exports导出,但是只允许有一个module.exports导出。

exports导出(每个模块包含任意数量):

//my-module.js

//导出多个方法和变量
let a = 1, b = 2;
exports.a = a;
exports.b = b;
exports.FunctionName = () => {
    console.log(123)
};
console.log(exports);//{ a: 1, b: 2, FunctionName: [Function] }

require语句使用导出:

const {a, b, FunctionName} = require('./my-module');//可直接解构
console.log(a, b);//1 2
FunctionName();//123

module.exports导出(每个模块包含一个):

//my-module.js

//导出多个方法和变量
let FunctionName = () => {
    console.log(123)
};
let a = 1, b = 2;
module.exports = {a, b, FunctionName};
console.log(module.exports);//{ a: 1, b: 2, FunctionName: [Function: FunctionName] }

require语句使用导出:

const {a, b, FunctionName} = require('./my-module');// 可直接解构
console.log(a, b);//1 2
FunctionName();//123
        更多详细信息可查询这里官方文档

总结

        exportexport default使用import导入。
        exportsmodule.exports使用require导入。常用的Nodejs项目中。
        exportexports在模块中可使用多个。
        export defaultmodule.exports在模块中只可使用一个。

相关文章

  • JS中模块的暴露和引入方式

    export和export default: 在创建JavaScript模块时,export 语句用于从模...

  • 2.common.js规范

    1.引入模块 require("模块名") 一旦模块被引入,模块内的代码会被执行 2.暴露模块 js文件中引入另外...

  • TypeScript编写

    通常,我们写js的时候有两种引入js的方式: 在html文件中通过 标签全局引入全局变量。 通过require模块...

  • es6与node模块化加载的区别

    node 在none中导入一个包(模块)的方式 Node 中向外暴露成员的形式: 在node中想要在一个模块中引入...

  • gulp-concat js-压缩并合并

    引入 gulp 模块 引入 uglify 压缩 模块 引入 js 合并模块 压缩 并 合并 js文件

  • 变量使用es6模块引入与传统引入对比

    使用传统方式引入aaa.js bbb.js test.html 使用es6模块引入aaa.js bbb.js te...

  • require/module/exports

    require(string path) 引入模块。返回模块用过module.exports 和exports暴露...

  • webpack -- 第三方模块引入

    第三方模块引入 expose-loader方式引入 通过inline loader将第三方模块暴露给全局 配置we...

  • webpack(exclude存疑)

    参考资料 webpack漫谈 webpack专栏 js早期引入模块的方式 script标签 Require.js ...

  • nodejs 入门

    引入 require的方式来引入组件和自己写的文件 stringApi.js中要用到exports方式才可以被引入...

网友评论

      本文标题:JS中模块的暴露和引入方式

      本文链接:https://www.haomeiwen.com/subject/zdbaihtx.html