【ECMAScript6】模块化

最新推荐文章于 2025-05-06 19:02:54 发布

Willard Leozi

最新推荐文章于 2025-05-06 19:02:54 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

文章标签： es6 javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41481731/article/details/125538681

Web前端专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了模块化编程的优势，如避免命名冲突、代码复用和提高维护性，并详细介绍了export和import这两个核心命令。通过三种数据暴露方式（分别暴露、统一暴露、默认暴露）和三种模块引入方式（通用导入、解构赋值、默认暴露导入），阐述了模块化的基本用法。同时，提到了使用babel将ES6模块转换为ES5以兼容浏览器，并讲解了代码修改后需重新编译打包的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块化介绍

模块化的优势：

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

模块化的两个主要命令：

export：用于规定模块的对外接口
import：用户输入其它模块提供的功能

模块引入与数据暴露的不同实现方式

1. 数据暴露的三种方式

1.1 分别暴露

        // js文件
        export let idx = 1
        export function add(x, y) {
            return x + y 
        }
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            log(m)  // Moudle
            console.log(m.idx)  // 1
            console.log(m.add(1, 2))  // 3
        </script>

1.2 统一暴露

        // js文件
        let idx = 1
        function add(x, y) {
            return x + y 
        }
        export {idx, add}
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            log(m)  // Moudle
            console.log(m.idx)  // 1
            console.log(m.add(1, 2))  // 3
        </script>

1.3 默认暴露

        // js文件
        export default {
            idx: 1,
            add: function(x, y) {
                return x + y 
            }
        }
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            console.log(m.default)  // Moudle
            console.log(m.default.idx)  // 1
            console.log(m.default.add(1, 2))  // 3
        </script>

2. 模块引入的三种方式

2.1 通用导入方式

        import * as m from './js/index.js'

2.2 解构赋值方式

        import {idx, add} from './js/index.js'
        import {idx as idx1, add as add1} from './js/index.js'
        import {default as mm} from './js/index.js'  // 针对默认暴露

2.3 只针对默认暴露的引入模块方式

        import mm from './js/index.js'

使用babel对ES6模块化代码进行转换

不是所有浏览器都对ES6语法支持，所以需要用babel将ES6语法转换为ES5语法使得浏览器解析。
具体步骤：

安装工具 babel-cli babel-preset-env browserify(webpack)
执行babel命令

        // src/js是源文件  dist/js是转换之后的文件路径
        npx babel src/js -d dist/js --presets=babel-preset-env  // 局部安装的babel
        babel src/js -d dist/js --presets=babel-preset-env   // 全局安装的babel

打包

        // dist/js/app.js是源文件   dist/bundle.js是打包后文件的输出路径
        npx browserify dist/js/app.js -o dist/bundle.js

注意：每次修改源文件之后，都需要重新通过babel和browserify编译打包