JavaScript ES6新特性(二):模块化

简介

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

好处:

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

语法:
主要分为暴露语法和引入语法。
暴露语法:
在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>
    
    
    <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都能运行。

你可能感兴趣的