JavaScript ES6新特性（二）：模块化

最新推荐文章于 2024-07-24 11:09:48 发布

我会努力变强的

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量598

点赞数

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

本文链接：https://blog.csdn.net/qq_40837310/article/details/122651642

版权

JavaScript 专栏收录该内容

38 篇文章 8 订阅

订阅专栏

简介

模块化指的是将一个很大的程序文件按照一定的规则进行拆分，然后根据需要进行引入组合。

好处：

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

语法：
主要分为暴露语法和引入语法。
暴露语法：
在js代码块中：
有三种暴露方式

// 对外暴露

//每个自身暴露
export let personName = "Yehaocong";

export let fun = function(){
    console.log("fun被调用了");
}


//统一暴露
let a = 1;
let b = 2;

export {a,b};


//默认暴露
//默认暴露
export default {
    name:"yehaocong",
    age:18

}

引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化</title>
</head>
<body>
    
    <!--引入，关键点是  type="module"-->
    <script type="module">
        //普通引入

        // import * as m1 from "./min1.js"
        // console.log(m1.personName);
        // m1.fun();
        // console.log(m1.a);
        // console.log(m1.b);

        //使用解构的形式引入
        import {personName,fun,a} from "./min1.js";
        console.log(personName);
        fun();
        console.log(a);

        //引入默认暴露
        import m3 from "./min1.js"
        console.log(m3.name);
    </script>
</body>
</html>

不是所有浏览器都支持ES6的，所以如果要使用ES6特性在不支持ES6的浏览器中都能正确运行，需要一个翻译器，就是babel。

将html文件整理一下，使用一个app.js文件进行html文件中的js片段。

import {personName,fun,a} from "./min1.js";
        //引入默认暴露
import m3 from "./min1.js"
   

console.log(personName);
fun();
console.log(a);
console.log(m3.name);

html变成如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化</title>
</head>
<body>
    
    <script src="./distjs/bundle.js" type="module">
       
    </script>
</body>
</html>

第一步安装工具：

babel-cli
bable-preset-env
browserify

命令：npm i babel-cli babel-preset-env browserify -D

第二步：转义，把代码翻译成每个不支持ES6的浏览器也能运行的代码。

npx babel 源文件夹 -d 生成的转义的文件夹 --presets=babel-preset-env

在这里插入图片描述

第三步：打包
命令：

 npx browserify 源文件 -o 打包后的输出文件

在这里插入图片描述

然后html就引入输出的文件。
在这里插入图片描述

然后所有对源文件的更改后，执行编译和打包即可，编译打包后文件具有兼容性，是否支持es6都能运行。

我会努力变强的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ES6新特性（二）：模块化

简介模块化指的是将一个很大的程序文件按照一定的规则进行拆分，然后根据需要进行引入组合。好处：防止命名冲突。代码复用。高维护性。语法：主要分为暴露语法和引入语法。暴露语法：在js代码块中：有三种暴露方式// 对外暴露//每个自身暴露export let personName = "Yehaocong";export let fun = function(){ console.log("fun被调用了");}//统一暴露let a = 1;let b =
复制链接

扫一扫

专栏目录