虚拟插件 Babel
在任何Vite命令中运行 Babel, 在服役期间也是如此.
动机
大部分 Vite 插件只在期间运行 Babel build没有 serve,只有其他可能的方法 @vitejs/插件反应. ESBuild是真棒工具,但并不支持一些实验性特征,比如装饰者(英语:第2349号问题)或类实例字段,出框. 你可以在TypeScript中使用,但不是纯JS. 此插件是为了允许使用这些特性, 并运行 bail 在 optimizeDeps, (中文(简体) ), dev 财务报告和审定财务报表 build 级,但可以配置.
安装
# yarn
yarn add -D vite-plugin-babel
# npm
npm install -D vite-plugin-babel
使用量
添加到您的 Vite 配置
import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';
export default defineConfig({
plugins: [
// Babel will try to pick up Babel config files (.babelrc or .babelrc.json)
babel(),
// ...
],
// ...
})
配置
Babel 配置可以传递给 babelConfig 字段或通过 Babel 配置文件。 所有bayl选项见: Babel 选项。 。 。 .
默认情况下,Bail会运行JS/JSX文件. 你可以改变那个Vie filter 选项.
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
apply | 'serve' | 'build' | (config: UserConfig, env: ConfigEnv) => boolean | undefined | 将插件的使用限制为只构建或只服务 。 如果没有具体说明,将在两个周期内运行。 与 apply 在虚拟插件 API 中 |
enforce | 'pre' | 'post' | pre | 强制插件的命令执行 。 详情: 虚拟插件排序 |
babelConfig | object | {} | Babel 变形选项 |
filter | RegExp | (id: string) => boolean | /\.jsx?$/ | 哪些文件是Bail申请的 默认是js/jsx文件. 您可以通过一个接受文件名并返回的过滤功能 true | false |
include | string | RegExp | Array<string|RegExp>) | undefined | 包含哪些文件。 如果省略,则包括全部 |
exclude | string | RegExp | Array<string|RegExp>) | undefined | 哪些文件可以排除。 如果使用时 include,它具有更高的优先级,并且可以排除文件,与文件匹配 include 模式 |
loader | Loader 或者说 (path: string) => Loader | undefined | 这告诉人们如何在贝尔变身后解释内容. 例如,js加载器将内容解释为JavaScript,而cs加载器将内容解释为CSS. 装载器默认为js,如果它没有指定的话. 见 内容类型 所有内置加载器的完整列表. |
提示
Vite团队没有启用并且默认包括了Babel,因为他们希望尽可能快地保持经验,而Esbuild已经可以做很多事情了,你可能会做Babel. 因此,我们建议只包括你真正需要的 Babel 插件。 您可以使用选项 babelConfig.configFile 并禁用 Babel 配置文件, 例如 :
babel({
babelConfig: {
babelrc: false,
configFile: false,
plugins: ['@babel/plugin-proposal-decorators']
}
})
或仅仅使用 .babelrc.json。 。 。 .
注: 任何bail插件和预设需要单独安装,不包含在这个包中.
解决问题
[错误] 目前未启用 JSX 语法扩展
这通常发生在您使用此插件只转换一个插件的部分时 .jsx file(例如装饰器),而JSX语法未加修改。 默认情况下, Esbuild 将内容解释为 .js,所以你需要指定装填器 esbuild 使用.
示例
import { extname } from 'path';
// ...
babel({
babelConfig: {
babelrc: false,
configFile: false,
plugins: ['@babel/plugin-proposal-decorators'],
// uses the jsx loader for .jsx files
loader: path => {
if (extname(path) === '.jsx') {
return 'jsx';
}
},
}
})
许可证
图书馆项下 MIT 许可证