如何使用 Javascript 在 React 中使用“从 src/* 导入组件”导入所有组件，styles 等？

Question

When I try one of the following two imports

import 'src/assets/styles/App.scss'
-
import 'assets/styles/App.scss'

I'm receiving the following error's respectively

Module not found: Can't resolve 'src/assets/styles/App.scss' in '/path/to/my/project/src'
-
Module not found: Can't resolve 'assets/styles/App.scss' in '/path/to/my/project/src'

---

In typescript I believe that I was fixing this by having

"include": [
    "./src/**/*"
]

in my tsconfig.json, either that or maybe

"compilerOptions": {
    ...
    "baseUrl": "./",
    ...
}

I'm not sure completely sure though, because these options were created by create-react-app

---

How would I create this effect in just plain javascript in React?

---

Update

I created a jsconfig.json file containing

{
    "compilerOptions": {   
        "baseUrl": "./",   
    }
}

and receive the following error output

 internal/modules/cjs/loader.js:800 throw err; ^ SyntaxError: /path/to/my-app/jsconfig.json: Unexpected token } in JSON at position 62 at JSON.parse (<anonymous>) at Object.Module._extensions..json (internal/modules/cjs/loader.js:797:27) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at getModules (/path/to/my-app//node_modules/react-scripts/config/modules.js:133:14) at Object.<anonymous> (/path/to/my-app/node_modules/react-scripts/config/modules.js:149:18) at Module._compile (internal/modules/cjs/loader.js:778:30) npm ERR. code ELIFECYCLE npm ERR. errno 1 npm ERR: my-app@0.1.0 start. `react-scripts start` npm ERR. Exit status 1 npm ERR. npm ERR: Failed at the my-app@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/me/.npm/_logs/2020-09-22T17_18_27_953Z-debug.log

Answer 1

In case you're using Webpack, edit your webpack.config.js with:

resolve: {
   alias: {
     assets: path.resolve(__dirname, 'src/assets/'),
     components: path.resolve(__dirname, 'src/components/')
    }
}

In case not, you could use a Babel plugin called babel-plugin-module-resolver . To activate this plugin functionality, create the file .babelrc , or edit in case you already have it with this code:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      alias: {
        assets: path.resolve(__dirname, 'src/assets/'),
        components: path.resolve(__dirname, 'src/components/')
      }
    }]
  ]
}

This code will define the alias of the paths assets & components. Then, you can use them to import directly as per your example:

import * as assets from 'assets/myModule'

• Babel documentation .
• Good examples of using this plugin .

Answer 2

Try with creating a.env file that contains: NODE_PATH=src/