我自己的包中的npm包babel错误

Posted 2023-03-07

【中文标题】我自己的包中的npm包babel错误

【英文标题】：npm package babel error in my own package

【发布时间】：2020-10-29 04:21:05

【问题描述】：

我创建了自己的 npm 包，但在测试应用程序中使用时出现以下错误：将 @babel/plugin-transform-react-jsx 添加到 Babel 配置的“插件”部分以启用转换。

注意：我已经用 JSX 编写了我的组件

package.json

      "name": "my-test-package",
      "version": "1.4.3",
      "description": "Rich form fieds with simple and complex validation",
      "main": "index.js",
      "homepage": "https://github.com",
      "url": "https://github.com/",
      "license": "MIT",
      "bugs": 
        "url": "https://github.com/"
      ,
      "scripts": 
        "start": "webpack-dev-server --mode development --env  --open --hot --port",
        "build": "./node_modules/.bin/webpack --mode production"
      ,
      "author": "Harish",
      "contributors": [
        "Harish"
      ],
      "peerDependencies": 
        "react": "^16.6.1",
        "react-dom": "^16.6.3",
        "prop-types": "^15.5.4"
      ,
      "devDependencies": 
        "@babel/core": "^7.8.4",
        "@babel/plugin-proposal-class-properties": "^7.10.4",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.8.3",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.6",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11"
      

.babelrc 文件：

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

提前致谢。

【参考方案1】：

您需要将其添加到您的 .babelrc 文件中，而不是 package.json

【讨论】：

添加了我的 bable rc 文件

将@babel/plugin-transform-react-jsx 添加到插件部分

仍然出现如下错误 + 33 个隐藏模块 ./node_modules/intelli-fields/index.js 中的错误 65:12 模块解析失败：意外令牌 (65:12) 您可能需要适当的loader 来处理这个文件类型，目前没有配置 loader 来处理这个文件。见webpack.js.org/concepts#loaders |渲染（） | return (> | this.props.type == 'hidden'?( | "" @ ./src/components/App.js 24:0-43 40:98-111 @ ./src/index.js

这是我的 GitHub 网址：github.com/Hahkarthick/intelli-fields