ES6 之后：使用 requirejs 打包

随着 JavaScript 的不断发展，新的标准和技术层出不穷，其中 ES6 是一个重要的里程碑，它引入了许多新的语言特性和语法糖，使得 JavaScript 更加强大和易用。然而，ES6 的模块系统与传统的 CommonJS 和 AMD 规范不兼容，这给前端开发带来了一些困扰。在这篇文章中，我们将介绍如何使用 requirejs 打包 ES6 模块，以便在浏览器环境下使用。

requirejs 简介

requirejs 是一个 AMD 规范的实现库，它提供了一种模块化的开发方式，可以让我们将代码分解为多个模块，每个模块都有自己的作用域和依赖关系。通过 requirejs，我们可以在浏览器环境下异步加载模块，避免了全局命名冲突和脚本加载顺序问题，提高了代码的可维护性和可扩展性。

使用 requirejs 打包 ES6 模块

requirejs 支持使用 babel 编译 ES6 模块，并将其打包为 AMD 规范的模块。下面是一个简单的示例：

// 定义模块
define(['exports'], function(exports) {
  'use strict';
  Object.defineProperty(exports, '__esModule', { value: true });
  function square(x) {
    return x * x;
  }
  exports.square = square;
});

// 加载模块
require(['./math'], function(math) {
  console.log(math.square(4)); // 16
});

在这个示例中，我们定义了一个名为 math 的模块，其中包含一个 square 函数，用于计算一个数的平方。通过 define 方法，我们将模块的依赖关系和导出内容都传递给了 requirejs。在加载模块时，我们使用 require 方法来异步加载 math 模块，并在回调函数中使用导出的 square 函数。

需要注意的是，在 ES6 模块中，我们使用 export 关键字来导出函数、变量或对象，使用 import 关键字来导入其他模块的内容。而在 AMD 规范中，我们需要使用 define 和 require 方法来分别定义和加载模块。为了让这两种规范兼容，我们可以使用 babel 编译 ES6 模块，并将其转换为 AMD 规范的代码。

配置 requirejs

要使用 requirejs 打包 ES6 模块，我们需要先配置一些参数。在 requirejs 的配置文件中，我们可以指定 babel 的转换规则、模块的根目录、依赖的库等信息。下面是一个简单的配置文件示例：

require.config({
  baseUrl: 'js',
  paths: {
    'babel': 'https://cdn.jsdelivr.net/npm/babel-core@6.26.3/browser.min',
    'babel-preset-env': 'https://cdn.jsdelivr.net/npm/babel-preset-env@1.7.0',
    'math': 'math'
  },
  shim: {
    'babel': {
      exports: 'Babel'
    }
  },
  map: {
    '*': {
      'es6': 'babel!babel-preset-env'
    }
  },
  config: {
    'es6': {
      modules: 'amd'
    }
  }
});

在这个配置文件中，我们指定了模块的根目录为 js 目录，其中包含了 math 模块。我们还指定了 babel 和 babel-preset-env 的路径，并将 babel 库设置为一个全局变量。通过 map 属性，我们将所有名为 es6 的模块都映射到 babel 和 babel-preset-env 上，以便在加载时进行编译。最后，我们在 config 属性中指定了 es6 模块的编译规则为 amd。

打包 ES6 模块

有了上面的配置文件，我们就可以使用 requirejs 打包 ES6 模块了。下面是一个简单的命令行示例：

r.js -o build.js

在这个命令中，我们使用 r.js 工具，并指定了一个名为 build.js 的配置文件。在 build.js 文件中，我们可以指定要打包的模块、要排除的依赖项、输出的文件名等信息。下面是一个简单的 build.js 文件示例：

({
  baseUrl: 'js',
  name: 'math',
  out: 'math.min.js',
  paths: {
    'babel': 'https://cdn.jsdelivr.net/npm/babel-core@6.26.3/browser.min',
    'babel-preset-env': 'https://cdn.jsdelivr.net/npm/babel-preset-env@1.7.0'
  },
  shim: {
    'babel': {
      exports: 'Babel'
    }
  },
  map: {
    '*': {
      'es6': 'babel!babel-preset-env'
    }
  },
  config: {
    'es6': {
      modules: 'amd'
    }
  },
  optimize: 'none'
})

在这个配置文件中，我们指定了要打包的模块名为 math，输出的文件名为 math.min.js。我们还指定了 babel 和 babel-preset-env 的路径，并将 babel 库设置为一个全局变量。通过 map 属性和 config 属性，我们使用了和上面相同的配置，以便将 ES6 模块转换为 AMD 规范的代码。最后，我们将 optimize 属性设置为 none，以便在调试时可以查看源代码。

总结

通过使用 requirejs 打包 ES6 模块，我们可以在浏览器环境下使用新的语言特性和语法糖，提高了代码的可维护性和可扩展性。在实际开发中，我们可以使用 babel 和 requirejs 的插件来自动化打包和编译，以便更加高效和方便地使用 ES6 模块。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c47535add4f0e0ffef69eb