ES6模块化,模块的导入和导出
Babel转译
概述
由于JS的广泛使用及AJAX技术的发展,众多js文件通过 <script>
引入到当前页面中,每一个js文件发起一个GET请求,众多的js文件都需要返回到浏览器端,网络开销成本高。多js文件还容易出现各种全局变量污染,函数名冲突等问题,因此在ES6开始提供支持模块化的语法,但目前市面上的浏览器支持还不够
ES6模块化
- ES6中模块自动采用严格模式
- import语句,导入另一个模块导出的绑定,想导入,必须在另一个模块中先导出
- export语句,从模块中导出函数、对象、值的,供其它模块import导入使用
导入导出
- 导入导出示例a.js和b.js
// a.js文件
// 缺省导出
export default class A {
constructor(x) {
this.x = x;
}
show() {
console.log(this.x);
}
};
// 导出函数
export function foo() {
console.log('foo function');
}
// 导出常量
export const a = 'aaa';
// b.js文件
import A, { a, foo } from "./a";
foo();
var b = new A(1000);
b.show();
console.log(a);
试图在VS Code中执行,发现VS Code虽然有很好的语法支持,但是运行环境,包括V8引擎,都不能很好的支持模块化语法。因此必须进行转译,将从高版本语法转译到低版本的支持的语句
缺省导入导出
- 使用export/import default
- 只允许一个缺省导出,缺省导出可以是变量、函数、类,但不能使用let、var、const关键字作为缺省导出(注意只是针对缺省导出时不能使用这些关键字)
- 缺省导入的时候,可以自己重新命名,可以不需要和缺省导出时的名称一致,但最好一致
- 缺省导入,不需要在import后使用花括号
命名导入导出
// 命名导出 函数
export function foo(){
console.log('regular foo()');
}
// 函数定义
function bar() {
console.log('regular bar()');
}
// 变量常量定义
let x = 100;
var y = 200;
const z = 300;
// 导出
export {bar, x, y, z};
- 导入也可使用as设置别名
- 也可以使用
import *
导入所有导出,但会定义一个新的名词空间。使用名词空间来避免冲突
import * as mod from './test.js';
mod.foo();
Babel
官方文档
离线转译安装配置
这里以老版本babel 6.x版本为例,7.x有较大出入,请参考官方文档
- babel 6.x setup文档选择CLI
设置镜像
- 在项目目录新建
.npmrc
文件,并添加淘宝镜像
$ echo "registry=https://registry.npm.taobao.org" > .npmrc
可以放到用户家目录中,对当前用户有效
如果在npm时没生效(我这好像不生效,可能我的环境有点问题),可以使用参数如npm install module-name --registry=https://registry.npm.taobao.org
更多参考淘宝 NPM 镜像站
离线转译当前项目
- 初始化npm,在项目根目录执行如下命令
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (jsproject) test
version: (1.0.0)
description: babel_test
entry point: (a.js) b.js
test command:
git repository:
keywords:
author: jerry
license: (ISC)
About to write to /Users/tina/Monkeyjerry/JsProject/package.json:
{
"name": "test",
"version": "1.0.0",
"description": "babel_test",
"main": "b.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "jerry",
"license": "ISC"
}
Is this OK? (yes) yes
在项目根目录下会生成package.json文件
- 安装babel,在项目根目录执行如下命令
$ npm install babel-core babel-cli --save-dev
--save和--save-dev可以省掉手动修改package.json文件的步骤
npm install module-name --save/--save-dev 都会自动把模块和版本号添加到dependencies部分,--save部署运行时用,--save-dev开发调试时用
- 配置babel和安装预设
- 在项目根目录下创建
.babelrc
文件
$ vim .babelrc
# 写入如下json格式内容
{
"presets": ["env"]
}
env 需根据当前环境自动选择
- 安装依赖
$ npm install babel-preset-env --save-dev
- 离线转译
- 将需要转译的js文件如文章开头的a.js和b.js放入src,并新建目标目录lib
- 执行命令
- 方式1:在当前目录下执行如下命令
./node_modules/.bin/babel src -d lib
即找到node_modules下找到babel可执行文件来转译 - 方式2:修改package.json,在scripts中添加运行命令,然后在根目录下运行
npm run build
{ "name": "test", "version": "1.0.0", "description": "babel_test", "main": "b.js", "scripts": { "build": "./node_modules/.bin/babel src -d lib" }, "author": "jerry", "license": "ISC" }
- 方式3:直接在项目根目录下运行
npx babel src -d lib
(推荐)
- 方式1:在当前目录下执行如下命令
转译成功后则可则在lib文件夹下找到转译后的a.js和b.js
- 校验结果,执行
node lib/b.js
则可正常运行
参考
- magedu