大前端基础 3

发表于 更新于 分类于 本文字数： 635 阅读时长 ≈ 2 分钟
本文主要介绍 Babel 和模块化。模块化是前端开发中的一个重要概念，也是前端开发中的一个重要技术。Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码，从而在现有环境中执行。

Babel

Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码，从而在现有环境中执行。

参考：Babel 官网

安装

1
npm install --save-dev @babel/core @babel/cli @babel/preset-env

–save-dev 会将安装的包信息写入 package.json 中的 devDependencies 中。

这里安装 babel 建议加上 --save-dev，因为 babel 只是在开发阶段使用，项目上线后不需要。

使用

配置

在项目根目录下创建一个 .babelrc 文件，内容如下：

1
2
3
4
5
{
    "presets": [
        "@babel/preset-env"
    ]
}

假如要使用 es2015 的语法，那么就需要安装 @babel/preset-es2015

1
npm install --save-dev @babel/preset-es2015

然后在 .babelrc 中配置：

1
2
3
4
5
6
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-es2015"
    ]
}

进行编译：

1
2
3
4
5
6
7
8
# 编译 src 目录下的文件，输出到 lib 目录下
npx babel src --out-dir lib
# --out-file 指定输出文件
npx babel src --out-file lib/index.js
# 或者使用 -o

# --out-dir / -d 指定输出目录
npx babel src -d lib

可以在命令中省略 npx，直接使用 babel，但是需要全局安装 babel-cli。

自定义脚本

改写 package.json 文件中的 scripts 字段，如下：

1
2
3
4
5
{
    "scripts": {
        "build": "babel src -d lib"
    }
}

这样就可以使用 npm run build 来执行编译了。

模块化

随着前端项目越来越复杂，代码量越来越大，为了方便管理代码，就需要将代码分割成一个个模块，然后在需要的地方引入。

模块化规范

  • CommonJS

  • ES6 Module

CommonJS

CommonJS 是 Node.js 采用的模块化规范。

案例

  1. 在 src 目录下创建 module.js 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义模块
let name = 'module';
let age = 18;
let say = function() {
    console.log('hello');
}

// 暴露模块
module.exports = {
    name,
    age,
    say
}

  1. 在 src 目录下创建 index.js 文件，内容如下：

1
2
3
4
5
6
7
// 引入模块
let module = require('./module');

// 使用模块
console.log(module.name);
console.log(module.age);
module.say();

ES6 Module

ES6 Module 是 ES6 中新增的模块化规范。

案例

  1. 在 src 目录下创建 userApi.js 文件，内容如下：

1
2
3
4
5
6
7
export function getUser() {
    console.log('get user');
}

export function addUser() {
    console.log('add user');
}

  1. 在 src 目录下创建 index.js 文件，内容如下：

1
2
3
4
5
6
7
// 引入模块
import { getUser, addUser } from './userApi';
// 这样其实会报错，因为浏览器不支持 ES6 Module，需要使用 babel 进行编译

// 使用模块
getUser();
addUser();

  1. 使用 babel 进行编译

1
npx babel src -d lib

  1. 使用 node 运行编译后的文件

1
node lib/index.js

拓展

点击展开

是否好奇 Babel 是如何将 ES6 Module 编译成 Babel.js 的呢？

打开 lib/index.js 文件，内容如下：

1
2
3
4
5
"use strict";

var _userApi = require("./userApi");
(0, _userApi.getUser)();
(0, _userApi.addUser)();

可以看到，babel 将 ES6 Module 编译成了 Babel.js 的形式。