ES6模块

最新推荐文章于 2024-04-15 06:24:23 发布

richest_qi

最新推荐文章于 2024-04-15 06:24:23 发布

阅读量570

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/105056721

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

项目目录

|-node_modules

|-package.json

|-server.js

|-public

|-index.html

|-index.js

|-math.js

|-.babelrc

|-dist

搭建验证环境

npm init -y 
npm install --save express

server.js中，使用了express搭建了一个小型的web服务器，监听本地3000端口，即localhost:3000。

public目录作为静态文件，因此访问localhost:3000,便是访问http://localhost:3000/index.html。

//server.js 搭建本地服务器
const express = require("express");
const server = express();
server.use(express.static("./public"));
server.listen(3000,function(){
	console.log("listening on *:3000");
})

初探import和exports

math.js作为一个独立的模块，提供加减乘除计算能力；index.js引入math.js模块，使用该模块提供的add和sub方法；index.html中，指定index.js为应用入口。

//math.js
const add = (x,y) => x+y;
const substract = (x,y) => x-y;
const multiple = (x,y) => x*y;
const divide = (x,y) => x/y;

export {
	add,
	substract as sub,
	multiple as mul,
	divide as div
}

//index.js
import {add,sub} from "./math.js";
const sum = add(1,2);
const diff = sub(2,1);
console.log(sum,diff);

//index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>

验证

步骤1：打开cmd命令窗口，执行 node server.js，启动web服务器；

步骤2：打开浏览器窗口，输入：localhost:3000，控制台输出: 3 1

如果想一探究竟，import和export到底是如何工作的，可以用babel转码一把，具体可以这么做（前3步可任意顺序）：

第一步：安装 babel babel-cli babel-perset-env

npm install --save-dev babel babel-cli babel-preset-env

第二步：添加.babelrc文件，.babelrc文件内容如下：

{
	presets:["env"],
	plugins:[]
}

第三步：package.json的添加如下npm脚本，将public目录转码后的结果保存到dist目录

  "scripts": {
    "compile": "babel public -d dist"
  },

第四步：在cmd窗口，执行npm run compile。

转码后的结果如下，转码后的index.js中有个require，这是CommonJS的能力。

//math.js
"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});
var add = function add(x, y) {
	return x + y;
};
var substract = function substract(x, y) {
	return x - y;
};
var multiple = function multiple(x, y) {
	return x * y;
};
var divide = function divide(x, y) {
	return x / y;
};

exports.add = add;
exports.sub = substract;
exports.mul = multiple;
exports.div = divide;


//index.js
"use strict";

var _math = require("./math.js");

var sum = (0, _math.add)(1, 2);
var diff = (0, _math.sub)(2, 1);
console.log(sum, diff);

以上为基础，接下来主要研究下在定义和使用ES6模块时，import、export 和export default该怎么用。

import/export

比如，现在有一个辅助模块util.js，其中了定义了变量firstname、lastname和方法 sayHi，这些变量和方法均向外提供，

那么util.js的实现可以是这样的：

//util.js   第一种
export const firstname = "Steve";
export const lastname = "Jobs";
export const sayHi = function(){
	console.log("hello world");
}

也可以这样：

//util.js  第二种
const firstname = "Steve";
const lastname = "Jobs";
const sayHi = function(){
	console.log("hello world");
}
export {
	firstname,
	lastname,
	sayHi
}

也可以这样，

//util.js  第三种
const firstname = "Steve";
const lastname = "Jobs";
function sayHi(){
	console.log("hello world");
}
export {
	firstname,
	lastname,
	sayHi
}

第二种和第三种几乎一样，唯一的区别是前者使用了函数表达式，而后者使用了函数声明。

util.js定义好了，现在index.js希望能够使用util.js中的变量和方法，这时候就要依靠import语句了。

index.js中可以这样写：

//index.js  第一种
import {firstname,lastname,sayHi} from "./util.js";
console.log(firstname,lastname);
sayHi();

也可以这样写：

//index.js  第二种
import * as u from "./util.js";
console.log(u.firstname,u.lastname);
u.sayHi();

export出的名称与import入的名称必须一致。

util.js的第一、二、三种方式，index.js的第一、二种方式，各任选其一，均可搭配调通。

现在来看看使用别名的情况，util.js在export时使用as定义了别名。

//util.js
const firstname = "Steve";
const lastname = "Jobs";
function sayHi(){
	console.log("hello world");
}
export {
	firstname as first,
	lastname as last,
	sayHi as say
}

//index.js
import {first,last,say} from "./util.js";
console.log(first,last);
say();

当然，import时可以使用as。

//util.js
const firstname = "Steve";
const lastname = "Jobs";
function sayHi(){
	console.log("hello world");
}
export {
	firstname as first,
	lastname as last,
	sayHi as say
}


//index.js
import {first as f,last as l,say as s} from "./util.js";
console.log(f,l);
s();

export default

不论输出变量还是方法，export default 后面不要跟"="，记住这个就不会出错了。

下面给出几个例子。

//util.js 第一种
export default "Steve Jobs";

//util.js  第二种
const fullname = "Steve Jobs";
export default fullname;


//index.js
import name from "./util.js";
console.log(name);

//util.js  第一种  函数声明
function sayHi(){
	console.log("hello world");
}
export default sayHi;


//util.js 第二种  函数表达式
const sayHi = function(){
	console.log("hello world");
}
export default sayHi;


//util.js 第三种  匿名函数
export default function(){
	console.log("hello world");
}

//util.js 第四种
export default function sayHi(){
	console.log("hello world");
}



//index.js
import say from "./util.js";
say();

//util.js
const firstname = "Steve";
const lastname = "Jobs";
const sayHi = function(){
	console.log("hello world");
}

export {
	firstname,
	lastname
}
export default sayHi;


//index.js
import say,{firstname,lastname} from "./util.js";
console.log(firstname,lastname);
say();

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6模块

ES6模块之import、export 和export default项目目录|-node_modules|-package.json|-server.js|-public |-index.html |-index.js |-math.js搭建验证环境server.js中，使用了express搭建了一个小型的web服务器，监听本地3000端...
复制链接

扫一扫