标签: babel-plugin

在我的 Vue-CLI 项目中，当我尝试使用??操作符时，出现以下错误：

语法错误：SyntaxError：/Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue：>目前未启用对实验语法“nullishCoalescingOperator”的支持（30:29）：

...

将 @babel/plugin-proposal-nullish-coalescing-operator ( https://git.io/vb4Se ) 添加到 Babel 配置的“插件”部分以启用转换。

我安装了@babel/plugin-syntax-nullish-coalescing-operator（它的名字好像变了），把它添加到我的 babel.config.js 中：

module.exports = {
    presets: ['@vue/app'],
    plugins: ['@babel/plugin-syntax-nullish-coalescing-operator'],
};

现在错误信息似乎倒退了，根本没有提到操作员名称：

Module parse failed: Unexpected token (39:35)
You may need an appropriate loader to handle this file type.
|             case 8:
|               points = _context.sent;
               console.log(sheetID ?? 37);

我究竟做错了什么？

我正在通过以下.babelrc 使用babel-preset-react-app：

{
  "presets": ["react-app"],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

我需要覆盖babel-plugin-transform-runtime选项。我尝试通过以下方式安装插件并将其添加到.babelrc中：

{
  "presets": ["react-app"],
  "plugins": [
    ["babel-plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": false
    }],
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

但这对我不起作用。

有什么办法可以完成而无需复制整个预设并将其粘贴到.babelrc中？

我正在尝试在反应本机应用程序中使用babel-plugin-module-resolver 。当我使用这样的插件配置时，babel.config.js它工作得很好。

plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.json'],
        alias: {
          utils: './src/utils',
        },
      },
    ],
  ],

但问题是我必须在每个别名路径中写入 ./src 。所以我尝试使用root选项。这是我尝试过的代码

plugins: [
    [
      'module-resolver',
      {
        root: './src', // I also tried ['./src']
        extensions: ['.ios.js', '.android.js', '.js', '.json'],
        alias: {
          utils: 'utils', // already tried '/utils' and './utils'
        },
      },
    ],
  ],

但这对我不起作用，我收到此错误：

error: Error: Unable to resolve module '../../../utils/Themes' from 'src/components/shared/Container.js': 

那么正确的使用root选项的方法是什么呢？

我正在尝试编写一个简单的 babel 插件，但是我很难用嵌套访问者遍历匹配的节点。我想require在需要某个模块的模块中找到所有调用，然后在同一范围内应用一些转换。

为了用一个人为的例子来说明这一点，我想转换源代码，如：

const f = require('foo-bar');
const result = f() * 2;

变成类似的东西：

const result = 99 * 2; // as i "know" that calling f will always return 99

我试图做到以下几点：

module.exports = ({ types: t }) => ({
    visitor: {
        CallExpression(path) {
            if (path.node.callee.name === 'require'
                && path.node.arguments.length === 1
                && t.isStringLiteral(p.node.arguments[0])
                && path.node.arguments[0].value === 'foo-bar'
            ) {
                const localIdentifier = path.parent.id.name;
                // if i print here it will show me that it successfully
                // …

So I am trying to run react-native using react-native-web. It requires some babel plugins to be added.

My app was created using react-app-rewired. I have tried several ways to add the babel plugin, however, with no success.

I am using a config-overrides.js file that looks like this:

const { override, addBabelPlugins, addDecoratorsLegacy, fixBabelImports } = require('customize-cra');

const addHandleBarsLoader = config => {
    // add handlebars-loader so that handlebars templates in
    // webpack-dev-server's served html files are parsed
    // (specifically the …

我收到“类私有方法未启用”。npm start在使用前导 # 指示私有方法的项目上运行时出错。我遵循这个答案：/sf/answers/3907547241/来启用装饰器并且它起作用，但我找不到相应的customize-cra组件来以相同的方式添加私有方法语法。 "@babel/plugin-proposal-private-methods": "^7.14.5"已安装并保存在我的packages.json 中。

我正在用 TypeScript 编写 Babel 插件，并且一直在努力寻找大量这样做的示例或文档。例如，我正在编写一个具有以下签名的访问者插件：

export default function myPlugin({ types: t }: typeof babel): PluginObj {

我从以下地方得到几种类型：

import type { PluginObj, PluginPass } from '@babel/core';

令我困扰的部分是{ types: t }: typeof babel来自

import type * as babel from '@babel/core';

我在网上找到的几个例子都使用了这个，但这真的是它应该如何输入的吗？

我正在尝试编写一个 babel 插件，将内容添加到文件中 - 例如；添加行console.log("start of " + __filename);和console.log("end of " + __filename);到每个文件。

到目前为止，我已经设法编写了一个完全执行此操作的访问者，但是在我的插件运行之前或之后，任何其他插件都不会修改现有代码。

例如，我有以下文件：

import * as foo from 'foo';
import * as bar from 'bar';

console.dir({ foo, bar });

env单独使用预设（即没有我的插件）和targets.node: 'current'我最终得到输出的选项- 请注意，es6 导入已转换为 commonjs 需要：

'use strict';
var _foo = require('foo');
var foo = _interopRequireWildcard(_foo);
var _bar = require('bar');
var bar = _interopRequireWildcard(_bar);
function _interopRequireWildcard(obj) { /* resolve commonjs or es6 module */ }
console.dir({ foo, bar });

但是，一旦我将自己的插件添加到此；似乎env跳过了预设以支持我自己的插件 …

关于这两个插件的文档中没有太多细节，我知道它们两个都像语法一样{...obj}工作。

但是，如何确定要使用哪个插件？

这个 Babel 插件：

module.exports = function(){
    return {
        visitor:{   
            Program:{
                enter(){ console.log('Enter') },
                exit(){ console.log('Exit') }
            }
        },
        pre(){ console.log('Pre') },
        post(){ console.log('Post') }
    }
}

为任何 javascript 文件生成以下输出：

Pre
Enter
Exit
Post

pre()Program.enter()在 之前和post()之后调用Program.exit()。

如果我想在 AST 遍历的开始/结束时运行一些代码，有什么理由我应该将该代码放在pre/post而不是Program.enter/中Program.exit？

有什么区别吗？