标签：src Tab ... index app crate react 文件夹 components

使用crate-react-app创建的项目配置alias，这样之后在项目中直接可以使用别名来访问某个文件目录，从而快速引用某个文件，如使用这个命令创建的项目中，我们这 src/ 目录下创建一个 components/ 文件夹，如果想在项目中快速引用 components/Tab/index.tsx 文件的话，我们可这样写： import Tab from '@Component/Tab/index ，那么我们是怎么实现的呢？

首先我们在使用 crate-react-app 创建项目后，进入到项目中执行 npm run eject 命令，将 react-script 插件中封装的 webpack、sass等配置文件暴露到项目中（注意此命令不可逆，也就是说，一旦解压后就不能更新 react-script 插件版本来更新本地的配置文件）。

我们在 config/path.js 文件中的 module.exports 内添加  appComponents: resolveApp('src/components') ，如：

module.exports = {
  ...
  appComponents: resolveApp('src/components'),
  ...
};

接下来，我们打开 config/webpack.config.js 文件，在 alias 对象中添加 "@components": paths.appComponents，如：

alias: {
  ...
  "@components": paths.appComponents,
  ...
}

然后，我们打开 tsconfig.json 文件，在 compilerOptions 对象中添加 ，如：

{
    compilerOptions: {
        ...
        "baseUrl":".",
        "paths": {
            "@components/*": ["src/components/*"]
        },
        ....
    }
}

经过这三部设置后，你就可以在你的文件中通过 @components 别名访问到 src/components 文件夹了，如：

我们在 src/ 文件夹下面添加 pages/ 文件夹，然后再添加一个 home/ 文件夹，在 home 文件夹下面添加 index.tsx 文件。那么我们在 src/pages/home/index.tsx 文件里面可以使用  import Tab from '@components/Tabindex' 来引入 src/components/Tab/index.tsx 文件了。

tsconfig.json 配置文件说明博客：https://www.imooc.com/article/305339?block_id=tuijian_wz

标签：src,Tab,...,index,app,crate,react,文件夹,components
来源： https://www.cnblogs.com/ayseeing/p/14225054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。