Es6 模块化

超、凢脫俗 2022-12-06 12:55 214阅读 0赞

**默认导出与导入**

// 创建了一个js文件，文件名module
    let a = 10;
    let b = 20;
    let c = 30;
    
    function show() { 
        console.log('1111')
    }
    // 注意 每一个模块只能使用一次 export default
    export default { 
        a,
        b,
        show
    }

//导入了module
    import module from './../module/module'
    // 导入了 a b show方法

// 使用
    created() { 
    	console.log(module.a)
    	console.log(module.b)
        module.show()
      }

**按需导出导入**

export let  s1 = 'aaa'
    export let  s2 = 'bbb'
    export function say() { 
        console.log('ccc')
    }
    // 下面代码对外输出一个函数area 
    export function area(radius) { 
        return Math.PI * radius * radius;
      }

//导入了module import的 module 是默认导出的内容 {s1,s2,say} 是按需导入
    import module,{ s1,s2,say,area} from './../module/module'

// 使用
    created() { 
        console.log(s1)
        console.log(s2)
        say()
        console.log(area(4))
      }

**模块继承**

// 导入其他模块
    export * from 'circle';

上面代码中的export \*，表示再输出circle模块的所有属性和方法。注意，export \*命令会忽略circle模块的default方法。然后，上面代码又输出了自定义的e变量和默认方法。

注意：const声明的常量只在当前代码块有效，如果想设置跨模块的常量（即跨多个文件）需参考[es6跨模块的常量][es6]\`

[es6]: https://es6.ruanyifeng.com/#docs/module

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6的模块化

如果你对模块化已经了解，可以直接从第三点开始阅读。一、模块化的概念：在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用

心已赠人/ 2023年10月11日 12:44/ 0 赞/ 13 阅读

相关 es6-module 模块化

在实际的开发项目中，存在着多种角色。前端就是其中一种，在大型项目中，前端也不可能只有一个，在这样的项目中，怎样协同工具，怎么解决js代码之间的依赖关系，代码怎样维护是个棘手的问

Myth丶恋晨/ 2023年06月14日 14:56/ 0 赞/ 1 阅读

相关 Es6 模块化

默认导出与导入 // 创建了一个js文件，文件名module let a = 10; let b = 20; let c = 30;

超、凢脫俗/ 2022年12月06日 12:55/ 0 赞/ 215 阅读

相关详解ES6模块化

[参考博文][Link 1] 第一步：初始化项目，使得能被npm管理 npm init -y 第二步：配置.babelrc Babel提供babel-c

ゝ一纸荒年。/ 2022年11月13日 15:27/ 0 赞/ 234 阅读

相关 JS模块化6_ES6模块化教程

ES6-Babel-Browserify模块化教程 0. ES6模块化语法暴露模块： - 分别暴露：export 暴露内容 - 统一暴

偏执的太偏执、/ 2022年09月12日 15:56/ 0 赞/ 236 阅读

相关 ES6模块化

文章目录一、模块化说明二、引入模块数据语法三、Babel的使用一、模块化说明模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小

r囧r小猫/ 2022年09月07日 14:59/ 0 赞/ 242 阅读

相关 es6模块化开发

如果不是默认导出则要用\{\}导入 5.文件导入导出在一个util.js文件里写入 export let sum=(x,y)=>{ retur

青旅半醒/ 2022年05月09日 06:36/ 0 赞/ 299 阅读

相关 es6模块化开发

如果不是默认导出则要用\{\}导入 1.文件导入导出在一个util.js文件里写入 export let sum=(x,y)=>\{ return x+y;

一时失言乱红尘/ 2022年04月17日 02:53/ 0 赞/ 285 阅读

相关 ES6 模块化

1/ 定义模块方法一：(对应的引入方法二) export const a = 1; export const b = 2; export l

男娘i/ 2022年04月13日 06:13/ 0 赞/ 320 阅读

相关 ES6的模块化

一点睛模块化就是把代码进行拆分，方便重复利用。类似Java中的导包，要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是模块。模块功能主要由两个命令构成：

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 02:08/ 0 赞/ 444 阅读