web 3d图形渲染器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

120 lines
2.4 KiB

  1. # import/no-relative-parent-imports
  2. Use this rule to prevent imports to folders in relative parent paths.
  3. This rule is useful for enforcing tree-like folder structures instead of complex graph-like folder structures. While this restriction might be a departure from Node's default resolution style, it can lead large, complex codebases to be easier to maintain. If you've ever had debates over "where to put files" this rule is for you.
  4. To fix violations of this rule there are three general strategies. Given this example:
  5. ```
  6. numbers
  7. └── three.js
  8. add.js
  9. ```
  10. ```js
  11. // ./add.js
  12. export default function (numbers) {
  13. return numbers.reduce((sum, n) => sum + n, 0);
  14. }
  15. // ./numbers/three.js
  16. import add from '../add'; // violates import/no-relative-parent-imports
  17. export default function three() {
  18. return add([1, 2]);
  19. }
  20. ```
  21. You can,
  22. 1. Move the file to be in a sibling folder (or higher) of the dependency.
  23. `three.js` could be be in the same folder as `add.js`:
  24. ```
  25. three.js
  26. add.js
  27. ```
  28. or since `add` doesn't have any imports, it could be in it's own directory (namespace):
  29. ```
  30. math
  31. └── add.js
  32. three.js
  33. ```
  34. 2. Pass the dependency as an argument at runtime (dependency injection)
  35. ```js
  36. // three.js
  37. export default function three(add) {
  38. return add([1, 2]);
  39. }
  40. // somewhere else when you use `three.js`:
  41. import add from './add';
  42. import three from './numbers/three';
  43. console.log(three(add));
  44. ```
  45. 3. Make the dependency a package so it's globally available to all files in your project:
  46. ```js
  47. import add from 'add'; // from https://www.npmjs.com/package/add
  48. export default function three() {
  49. return add([1,2]);
  50. }
  51. ```
  52. These are (respectively) static, dynamic & global solutions to graph-like dependency resolution.
  53. ### Examples
  54. Given the following folder structure:
  55. ```
  56. my-project
  57. ├── lib
  58. │ ├── a.js
  59. │ └── b.js
  60. └── main.js
  61. ```
  62. And the .eslintrc file:
  63. ```
  64. {
  65. ...
  66. "rules": {
  67. "import/no-relative-parent-imports": "error"
  68. }
  69. }
  70. ```
  71. The following patterns are considered problems:
  72. ```js
  73. /**
  74. * in my-project/lib/a.js
  75. */
  76. import bar from '../main'; // Import parent file using a relative path
  77. ```
  78. The following patterns are NOT considered problems:
  79. ```js
  80. /**
  81. * in my-project/main.js
  82. */
  83. import foo from 'foo'; // Import package using module path
  84. import a from './lib/a'; // Import child file using relative path
  85. /**
  86. * in my-project/lib/a.js
  87. */
  88. import b from './b'; // Import sibling file using relative path
  89. ```