问题
I've been using create-react-app package for creating a react website. I was using relative paths throughout my app for importing components, resources, redux etc. eg, import action from '../../../redux/action
I have tried using module-alis npm package but with no success. Is there any plugin that I can use to import based on the folder name or alias i.e. an absolute path?
Eg., import action from '@redux/action'
or import action from '@resource/css/style.css'
回答1:
Create a file called .env
in the project root and write there:
NODE_PATH=src
Then restart the development server. You should be able to import anything inside src
without relative paths.
Note I would not recommend calling your folder src/redux
because now it is confusing whether redux
import refers to your app or the library. Instead you can call your folder src/app
and import things from app/...
.
We intentionally don't support custom syntax like @redux
because it's not compatible with Node resolution algorithm.
回答2:
The approach in the accepted answer has now been superseded.
Create React App now has a different way to set absolute paths as documented here.
To summarise, you can configure your application to support importing modules using absolute paths by doing the following:
Create/Edit your jsconfig.json/tsconfig.json in the root of your project with the following:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Alternatively:
If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.
Once you've done this you can then import by specifying subdirectories of "src" (in the following example, components is a subdirectory of src) e.g.
import Button from 'components/Button';
回答3:
in package.json file,
eject this code in the scripts object like this..
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"eject": "NODE_PATH=src/ react-scripts eject"
},
this will enable the absolute path imports in your app
回答4:
We can use webpack 2 resolve property in the webpack config.
Sample webpack config using resolve :
Here component and utils are independent folder containing React components.
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
}
}
After that we can import directly in files :
import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';
Webpack 2 Resolve Reference
回答5:
I am using babel-plugin-module-resolver for my project to resolve that problem. babel-plugin-module-resolver also is the same as module-alis. So I think you should just resolve using module-alis problem.
Because you didn't tell us why using module-alis was fail? So i cant show you how to fix it.
Dont give up your solution while you dont know the reason!
回答6:
You can use absolute imports as described in another answers with baseUrl
in tsconfig.json or jsconfig.json (instead of obsolete NODE_PATH
).
However if you want to have alias for any directories (included dirs outside os src
) as you declared in question:
import action from '@redux/action' import style from '@resource/css/style.css'
It require modify webpack config which is possible with eject or better with rewire.
Use alias solution. It provide more then just alias but it allows also multiple src
folders in root directory:
Configure for your above example like this:
// config-overrides.js:
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
alias({
"@redux": "src/redux",
"@resource": "resource", // or "src/resource" if it is in src
})(config)
return config
}
or load paths from jsconfig.json or tsconfig.json with configPaths()
回答7:
use an index file in your folder
export { default } from './ mySubFolder/myComp';
来源:https://stackoverflow.com/questions/45213279/how-to-avoid-using-relative-path-imports-redux-action-action1-in-cre