移动Create React App文件夹会破坏应用程序 [英] Moving Create React App folder breaks working app

问题描述

我用create-react-app创建了一个基本的React Web应用程序，弹出后它具有以下结构.效果很好.

I've created a basic React web app with create-react-app and it has the following structure after ejecting. Works just fine.

intended-app-home
  |- the-app
      |- config
      |- node_modules
      |- public
      |- scripts
      |- src
      |- package.json
  |- .eslintignore
  |- .eslintrc
  |- .gitignore

现在，我想将the-app的内容上移至文件夹intended-app-home.执行此操作时，运行npm start时出现以下错误:

Now, I want to move the contents of the-app up a level, to the folder intended-app-home. When I do this, I get the following error when running npm start:

Failed to compile.

Error in ./src/index.js

  1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

✖ 1 problem (1 error, 0 warnings)


Error in ./src/components/Blah.js

  1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

我想念什么?假设应用文件夹是可移植的，这并不安全吗?

What am I missing? Is it not safe to assume that the app folder is portable?

这是我的.eslintrc内容:

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"]
  }
}

推荐答案

由于错误提示，您必须在.eslintrc中添加以下内容:

You have to add the following to your .eslintrc as the error suggest:

"parserOptions": {
  "sourceType": "module"
}

每个 ESLint文档:

• sourceType -如果您的代码在ECMAScript模块中，则设置为"script"(默认)或"module".

• sourceType - set to "script" (default) or "module" if your code is in ECMAScript modules.

问题是，在ECMAScript 2015中，有诸如脚本和模块之类的东西.脚本只是普通的JavaScript文件.另一方面，模块是用于导出数据和/或导入其他模块的脚本.因此，如果要使用import或export，则必须指定"sourceType": "module"，以便ESLint可以使用 Espree 并抹上它.

The thing is, in ECMAScript 2015, there are things such as scripts and modules. Scripts are just plain JavaScript files. Modules, on the other hand, are scripts that export data and/or import other modules. So, if you want to use import or export, you have to specify "sourceType": "module" so that ESLint can correctly parse your module code with Espree and lint it.

现在介绍为什么仅在将the-app内容上移一级时才会发生错误.默认情况下，Create React App在其项目中使用以下ESLint配置，该配置在package.json中指定:

Now onto why the error only happens when you move the-app contents up one level. By default, Create React App uses the following ESLint configuration for its projects, specified in package.json:

"eslintConfig": {
  "extends": "react-app"
}

因此，ESLint配置只是扩展了React App配置.如果您查看的来源， eslint-config-react-app ，在 index.js :

So the ESLint configuration just extends the React App configuration. And if you look at the source for eslint-config-react-app, in index.js:

parserOptions: {
  ecmaVersion: 6,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
    generators: true,
    experimentalObjectRestSpread: true,
  },
},

因此，默认情况下，Create React App的ESLint配置将sourceType设置为module.当您尝试将the-app的内容上移一级时，就会出现问题.由于您的.eslintrc没有没有指定sourceType，因此使用默认值script.而且由于.eslintrc会覆盖Create React App ¹ 中package.json中的ESLint，因此会出现错误，因为您无法在脚本中使用import和export.

So, by default, Create React App's ESLint configuration sets sourceType to module. The problem arises when you try to move the-app's contents up one level. Since your .eslintrc did not specify sourceType, the default value script is used. And since .eslintrc overrides the ESLint in the package.json from Create React App¹, the error occurs as you cannot use import and export in scripts.

如果要添加新规则，则不应创建新的ESLint配置文件.相反，只需编辑package.json中已经存在的配置:

You shouldn't create a new ESLint configuration file if you want to add new rules. Instead, just edit the configuration already in package.json:

"eslintConfig": {
  "extends": ["eslint:recommended", "react-app"],
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"]
  }
}

请注意，eslint-config-react-app已经为您设置了env.

Note that eslint-config-react-app already sets env for you.

¹ 如果您选中

¹ If you check the ESLint source, the default CLI option is to use the .eslintrc if the file exists over eslintConfig in package.json, see the property useEslintrc: true. Thus the reason it is overridden.

这篇关于移动Create React App文件夹会破坏应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！