ES6语法特性（五）模块化、引入npm包

最新推荐文章于 2024-02-27 14:13:51 发布

sharp_wu

最新推荐文章于 2024-02-27 14:13:51 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/qq_38232003/article/details/110402877

版权

本文探讨了ES6的模块化特性，包括其优点、模块化规范产品如CommonJS、AMD和CMD，以及export和import的语法。通过示例展示了如何创建和导入模块。同时，讲解了如何使用babel解决浏览器兼容性问题，以及如何将模块化引入npm包，如jQuery。

摘要由CSDN通过智能技术生成

ES6

模块化

模块化是指将一个大的程序文件，拆分为许多小的文件（模块），然后将小的文件组合起来。

优点

防止命名冲突
代码复用
高维护性

模块化规范产品

ES6之前本身没有模块化，社区衍生出模块化产品

CommonJS ===> NodeJS、Browserify
AMD ===> RequireJS
CMD ===> SeaJS

语法

模块功能主要有两个命令构成 export 、import

export 命令用于规定模块对外的接口
import 命令用于输入其他模块提供的功能

创建m1.js文件

export let name = 'wf';
export const say = () => {
   
  console.log('hello');
};

创建index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import * as m1 from './m1.js';
      console.log(m1);
    </script>
  </body>
</html>

结果：
在这里插入图片描述

export

分别暴露

export let name = 'wf';
export const say = () => {
   
  console.log('hello');
};

统一暴露

let name = 'wf';
const say = () => {
   
  console.log('hello');
};
export {
    name, say }

最低0.47元/天解锁文章

sharp_wu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录