Question

我正在关注this tutorial，已经过去了一周的时间，我试图解决该问题：

SyntaxError: TestComponent.js: Unexpected token (5:6)

  3 |   render() {
  4 |     return (
> 5 |       <div>
    |       ^
  6 |         { this.props.children }
  7 |       </div>
  8 |     )

当前，我们在2019年拥有@babel/preset-env，@babel/preset-react，@babel/cli，而不是指向babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-cli的教程。

因此，在package.json中使用它们并不能解决问题：

"babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  }

我尝试了几种方法，但没有停止错误的方法。我希望有人能够解决该问题并提供解决方案。

非常感谢！

Answer 1

TLDR：逐步详细介绍guide

自编写本教程以来，有几处更改，即以下是重大更改，除非另有列出，否则本教程中的其他步骤相同：

您需要下载并使用babel-cli才能使您的自定义“ lib” 脚本命令正常工作：

npm install --save-dev @babel/cli
您还需要下载并使用自定义“ lib” 脚本命令中的@babel/plugin-transform-react-jsx插件编译并转换您的React代码因为 Babel 6及更高版本不再具有React的任何本机转换。当您只想与其他人在npmjs上与本机JavaScript共享自定义组件时，这是必需的。

npm install --save-dev @babel/plugin-transform-react-jsx
更新您的“ lib ”脚本命令，以使用步骤2中列出的babel的JSX转换插件：

"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "lib": "babel --plugins @babel/transform-react-jsx src/node_modules --out-dir lib --copy-files", "test": "node scripts/test.js" },

注意：您也不需要教程中列出的.babelrc文件，因为我们稍后将编辑webpack.config.js文件以正确地转译JSX

第1步至第3步将允许您发布并与他人共享您的组件，但是您仍然需要针对本地开发进行调整，我将在下面介绍这些步骤：

对于自定义组件的package.json，请删除.js入口点的"main"扩展名，因为这将导致以下issue。例如，这是我的自定义组件的package.json：

{ "private": true, "name": "YourComponent", "main": "./YourComponent" }

现在，如果您尝试使用自定义组件在本地编译和运行应用程序，则会引发错误，抱怨自定义组件的JSX语法：

SyntaxError：YourComponent.js：意外令牌（6：6）

  3 |   render() {
  4 |     return (
> 5 |       <div>
    |       ^
  6 |         { this.props.children }
  7 |       </div>
  8 |     )

这是因为您需要编辑webpack.config.js文件以使用@babel/preset-env和@babel/preset-react babel预设。因此，您想添加以下行：

presets: ['@babel/preset-env', '@babel/preset-react'],到babel加载器以获取应用程序的代码。

作为参考，这是我的代码的相关部分（从329行开始）：

            ...
             // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                ],
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
           ...

现在，如果您在本地运行，它应该可以工作：npm run start

这些主要步骤可帮助解决我在本地运行的JSX投诉以及在npmjs上与其他人共享我的自定义组件的问题。我使用我的代码和一个详细的逐步指南（帮助其他人）创建了一个公共git repo，可以在here中找到它。

希望有帮助！

Answer 2

查看本教程并注意到它同时使用了“和”（引号的样式不同，我不知道正确地引用它们的正确语言）。

两者之间在外观上有非常细微的差别，但是只有其中一个会被正确解释，另一个会导致错误。本教程中的.babelrc使用了错误的引号样式。

如果您是从文章中复制并粘贴的，请检查以确保使用正确的引号样式，该引号应与键盘上的Enter键最接近。

npm运行弹出后无法使用JSX

2 个答案: