Javascript 如何测试babel是否工作，我的插件是否执行

我正在使用

Next.js

进行React应用程序的服务器端呈现（使用

样式化组件

），并且我在代码中用于显示组件名称的Babel插件存在问题

这是我的

.babelrc

文件：

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    },
    "production": {
      "presets": "next/babel",
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "displayName": false,
            "ssr": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "commonjs"
          }
        ],
        "next/babel"
      ]
    }
  }
}

当我同时运行

cross-env NODE\u env=development“tsc--watch”next

我得到这些行-意思是

。babelrc

在复制过程中使用：

[1] > Using external babel configuration
[1] > Location: "...../.babelrc"
[1] > Using "webpack" config function defined in next.config.js.

但一旦我转到开发工具并看到一些

样式化组件

，我就可以看到：

class=“sc iyvyFf gGaJAt”

但在我的代码中，我有以下定义：

const Title = styled.div`
  font-size: 40px;
  line-height: 1.13;
`

从中可以看出，我应该得到类似于

。。。而不仅仅是。

但我没有

在深入研究之后，我根据在浏览器控制台中得到的错误发现了以下内容：

---

似乎只有服务器代码被传输，而不是客户端代码看起来之前没有人不幸回答过这个问题

您看到的可能归结为您发布的这段代码：
tsc--watch

如果您在Babel之前执行TypeScript Transfilation，并将其留给TypeScript来传输到ES5，那么它将传输所有标记的模板文本，而不会给我们的插件提供任何挂钩

因为您已经在使用next.js，所以不需要从头开始设置Babel管道。相反，您只需要在TypeScript中禁用这种类型的传输

我建议您将
tsconfig.json
中的
target
设置为
ESNext
，这样一切都由巴贝尔决定

（见“目标”）