我正在使用craco和craco-alias在我的Create React App项目中为导入实现别名。遵循https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation和https://github.com/risenforces/craco-alias#readme中的说明我将package.json配置为使用craco而不是react-scripts来启动开发服务器,测试和生产版本]
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"lint:css": "stylelint './src/**/*.css'",
"lint:js": "eslint 'src/**/*.js'",
"test:w": "craco test --watch",
"postinstall": "patch-package"
},
...
然后我创建了别名路径的jsconfig.json文件
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components": ["components/*", "components"],
"@constants": ["constants/*", "constants"],
"@assets": ["assets/*", "assets"],
"@store": ["store/*", "store"],
"@utils": ["utils/*", "utils"]
},
"include": ["src"],
"exclude": ["node_modules", "build", "coverage"]
}
和craco.config.js文件,它使用craco-alias插件
/* craco.config.js */
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
baseUrl: './src',
source: 'jsconfig',
}
}
]
}
现在我正在使用别名在我的应用程序中这样导入
// root index.js file
...
import Layout from '@components/Layout';
import store from '@store'; // this line causes error on CI build
function App() {
return (
<Layout>
/* inner components */
</Layout>
);
}
一切正常(在导入测试中,即使我服务于本地构建的项目,混叠导入也可以在dev-server上运行),直到将其推送到github repo为止。该回购配置了github操作,以便在远程服务器上构建和测试项目,并且在安装所有软件包之后,它会失败并在构建步骤中出错。
Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.
./src/index.js
Cannot find module: '@store'. Make sure this package is installed.
You can install this package by running: npm install @store.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.
有人可以帮助我了解我的代码有什么问题吗?为什么craco或webpack期望'@store'是外部软件包,而不是内部模块的别名导入?
就我而言,问题不在craco或webpack中,而在我先前的操作和操作系统文件系统差异中。我在VS Code终端中使用Windows 10和WSL。因此,在我使用'@'符号作为别名之前,我尝试对文件夹使用CamelCase并通过Windows资源管理器将其重命名(因为对我而言,关闭VSCode并通过资源管理器重命名文件比在新的VSCode窗口中打开新的bash终端更简单)关闭打开的文件)。