Rollup Plugin Babel 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00546/article/details/141377059

Rollup Plugin Babel 使用教程

rollup-plugin-babelThis package has moved and is now available at @rollup/plugin-babel / https://github.com/rollup/plugins/tree/master/packages/babel项目地址:https://gitcode.com/gh_mirrors/ro/rollup-plugin-babel

项目目录结构及介绍

Rollup Plugin Babel 是一个用于 Rollup 的插件，主要用于在 Rollup 构建过程中使用 Babel 进行代码转换。以下是该项目的目录结构及各部分介绍：

rollup-plugin-babel/
├── src/
│   ├── index.js
│   └── transform.js
├── test/
│   ├── fixtures/
│   └── test.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── package.json
├── README.md
└── rollup.config.js

src/：包含插件的主要源代码。
- index.js：插件的入口文件。
- transform.js：负责代码转换的模块。
test/：包含测试文件。
- fixtures/：测试用例的输入和预期输出。
- test.js：测试脚本。
.babelrc：Babel 配置文件。
.eslintrc：ESLint 配置文件。
.gitignore：Git 忽略文件列表。
.npmignore：NPM 忽略文件列表。
LICENSE：项目许可证。
package.json：项目元数据和依赖列表。
README.md：项目说明文档。
rollup.config.js：Rollup 配置文件。

项目启动文件介绍

项目的启动文件是 src/index.js，这是插件的入口点。该文件导出了一个函数，该函数接受 Rollup 的配置对象，并返回一个包含 name 和 transform 属性的对象。

import transform from './transform';

export default function babel(options = {}) {
  return {
    name: 'babel',
    transform,
  };
}

babel 函数：接受一个 options 对象，该对象包含 Babel 的配置选项。
name 属性：插件的名称，这里是 'babel'。
transform 属性：指向 transform.js 模块，负责实际的代码转换。

项目配置文件介绍

`.babelrc`

.babelrc 文件是 Babel 的配置文件，用于指定 Babel 的预设和插件。以下是一个示例配置：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

presets：指定 Babel 的预设，例如 @babel/preset-env。
plugins：指定 Babel 的插件，例如 @babel/plugin-proposal-class-properties。

`rollup.config.js`

rollup.config.js 文件是 Rollup 的配置文件，用于指定 Rollup 的输入、输出和其他选项。以下是一个示例配置：

import babel from 'rollup-plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'
    })
  ]
};