Babel 编译 ES6 时如何使用 rollup
介绍
ES6 是 JavaScript 的一种较为新的语法规范，由于其主张模块化和简洁性，它的广泛使用已经成为一种趋势。但是，ES6 并不是所有浏览器都支持的，因此需要编译成浏览器可读的 ES5 语法。Babel 是一个完美的工具，它能够帮助我们实现这个目标。
Babel 实际上是一个 JavaScript 编译器。它会将 ES6 的语法转化为 ES5，并且还可以使用不支持的特性，如箭头函数、类、解构等。Rollup 是一个 JavaScript 模块打包器，与 Webpack 相比，Rollup 更专注于打包 ES6 模块的功能，同时也具有 Tree-shaking 的能力，也就是可以删除不需要的代码。
如果您使用 ES6 开发前端应用程序，您需要编译成 ES5，同时您可能也需要打包成单独的文件，因此 Babel 和 Rollup 是很好的选择。在本文中，我们将介绍如何使用 Babel 编译 ES6 并使用 Rollup 打包应用程序。
指南
1.安装依赖
首先，我们需要安装 Babel 和 Rollup 的依赖，它们分别是 @babel/core 和 rollup。
npm install --save-dev @babel/core rollup
我们还需要安装 @babel/preset-env 和 rollup-plugin-babel。第一个安装是为了告诉 Babel，我们想要使用 ES6 和其他特性，而第二个插件是为了告诉 Rollup，我们希望在打包时使用 Babel。
npm install --save-dev @babel/preset-env rollup-plugin-babel
2.创建 Babel 配置文件
我们需要在项目的根目录下创建一个 .babelrc 文件，内容如下：
// javascriptcn.com 代码示例
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}3.创建 Rollup 配置文件
在项目的根目录下创建一个 rollup.config.js 文件，内容如下：
// javascriptcn.com 代码示例
import babel from "rollup-plugin-babel";
export default {
input: "src/index.js",
output: {
file: "dist/app.js",
format: "umd",
},
plugins: [
babel(),
],
};这里指定了打包的入口为 src/index.js，输出文件是 dist/app.js。格式是 UMD，这允许我们在浏览器中使用 CommonJS 和 AMD 格式的包。
4.编写 JavaScript 代码
假设我们将使用 ES6 中的类和模板字面量编写应用程序。在 src/index.js 中编写代码如下：
// javascriptcn.com 代码示例
class Greeting {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
const greeting = new Greeting("World");
greeting.sayHello();这是一个非常简单的示例应用程序，其中包含一个 Greeting 类和一个实例化的 greeting 对象，调用的方法是 sayHello。
5.运行
我们已经为我们的应用程序完成了所有配置和代码的编写，现在可以通过以下命令构建应用程序：
npx rollup -c
注意，我们使用 rollup 的本地版本（npx），并将 -c 标志传递给我们的配置文件。
运行之后，会在 dist/ 目录下生成 app.js 文件，您可以在浏览器中打开此文件以查看应用程序的输出。
总结
在本文中，我们介绍了如何使用 Babel 将 ES6 代码编译成 ES5 并使用 Rollup 打包应用程序。您现在可以使用这个配置启动React 或者 Vue 项目，实现使用 ES6 和其他特性，同时在不同浏览器中获得相同的体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653736ff7d4982a6ebfa50c5