ES6——12——ES6模块化介绍、优势以及产品

最新推荐文章于 2022-03-16 12:46:37 发布

野生小米椒

最新推荐文章于 2022-03-16 12:46:37 发布

阅读量294

点赞数

分类专栏： ES6 文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/x1037490413/article/details/119449021

版权

ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.模块化介绍

在这里插入图片描述

2.模块暴露

注意：因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。
分别暴露和统一暴露的文件需要引入的话要加{} 默认暴露不用

2.1分别暴露

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //引入m.js模块内容
    import * as m from './es6.js'
    console.log(m);
    </script>
  </body>
</html>

export let name='找工作'
export function work(){
  console.log('15号投简历');
}

2.2 统一暴露

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //引入m.js模块内容
    import * as m2 from './m2.js'
    console.log(m2);
    </script>
  </body>
</html>

let name='刘涛'
function actor(){
  console.log('刘涛是个演员');
}
export{name,actor}

2.3默认暴露

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
    import * as m3 from './m3.js'
    console.log(m3);
    m3.default.tv()
    </script>
  </body>
</html>

export default{
  name:'陈娇蕊',
  tv:function(){
    console.log('电视剧主演');
  }
}

3.引入模块数据语法汇总

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //1.通用的导入方式
      // import * as m1 from "./m1.js"
      // import * as m2 from "./m2.js";
      //import * as m3 from "./m3.js";
      // console.log(m1);
      //m3的输出结果是个对象，对象有个属性是default，数据存在default里
      // console.log(m3);
      //console.log(m3.default.name);


      //2.解构赋值形式
      //2.1  m1模块
      // import { name, work } from "./m1.js";
      // console.log(name);
      // work();
      // 2.2  m2模块   m2的和m1重名了，用as取个别名
      // import { name as name2, actor } from "./m2.js";
      // console.log(name2);
      // actor();
      // //2.3  m3模块
      // //数据default里存着的，但是不能直接用default 要取个别名
      // import { default as m3 } from "./m3.js";
      // console.log(m3.name);
      // m3.tv();
 
      //3.简便形式，针对默认暴露
      import m3 from "./m3.js"
      console.log(m3);

    </script>
  </body>
</html>

m1.js

export let name='找工作'
export function work(){
  console.log('15号投简历');
}

m2.js

let name='刘涛'
function actor(){
  console.log('刘涛是个演员');
}
export{name,actor}

m3.js

export default{
  name:'陈娇蕊',
  tv:function(){
    console.log('电视剧主演');
  }
}

4.浏览器使用es6模块化

m1.js

export let name="金城武"
export function handsome(){
  console.log('大帅哥');
}

app.js 相当于是入口文件

import * as m1 from "./m1.js"
console.log(m1);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script src="./app.js" type="module">
    </script>
  </body>
</html>

5.babel对es6模块化代码转换

在项目中通常要使用babel进行转换,能把es6语法转换为es5
1.安装工具 babel-cli babel-preset-env browserify(webpack)
在这里插入图片描述

2.因为选择的是局部安装，所以npx babel 命令 ,如果是全局安装，可以直接使用babel命令
这行命令的第一个参数src/js是源文件目录下的文件夹，第二个参数是要转换到dist目录下js文件夹下
运行后会自动生成dist和js文件夹，里面就是转换好的文件
在这里插入图片描述 3.打包 npx browserify dist/js/app.js -o dist/bundle.js， -o是输出的意思，此时会多一个bundle.js文件
打包之后，回到home.html，引入bundle.js文件
如果我们要修改代码，要在源文件src中修改，不在打包好的dist中修改，修改完代码后页面不会有最新结果，因为我们引入的是bundle.js文件，因此我们需要重新打包

重新输入这两行命令即可
在这里插入图片描述
文件目录展示：

代码展示：
home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <script src="dist/bundle.js" type="module"></script>
</body>
</html>

m1.js

export let name="金城武"
export function handsome(){
  console.log('大帅哥');
}

m2.js

let name = "刘涛";
function actor() {
  console.log("刘涛是个演员");
}
export { name, actor };

m3.js

export default {
  name: "陈娇蕊",
  tv: function () {
    console.log("电视剧主演");
  },
};

app.js

import * as m1 from "./m1.js"
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
console.log(m1);
console.log(m2);
console.log(m3);

m1.handsome()
m2.actor()
m3.default.tv()

6.ES6模板引入NPM包

1.先下载包
2.在入口文件用import导入import 变量名 from 包名
我们这里用引入jquery包举例
在这里插入图片描述
然后重新打包就可以了

野生小米椒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6——12——ES6模块化介绍、优势以及产品

目录1.模块化介绍2.模块暴露2.1分别暴露2.2 统一暴露2.3默认暴露3.引入模块数据语法汇总4.浏览器使用es6模块化5.babel对es6模块化代码转换1.模块化介绍2.模块暴露注意：因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。2.1分别暴露html<!DOCTYPE html><html lang="en"> <head> <meta
复制链接

扫一扫