创建自定义装饰器"@"以从模块的父目录 (ReactJs) 导入模块

Question

我想使用自定义装饰器/注释（如@material-ui/core模块）从目录导入模块，如下示例：

而不是经典导入

import class1 from '../../../../Services/module1';

我想使用此语法

import class1 from '@Services/module1';

谢谢您的帮助！

Answer 1

我建议使用 babel-plugin-module-resolver

使用自定义根或别名指定.babelrc中的插件。这是一个例子：

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "~": "./app",
        "underscore": "lodash"
      }
    }]
  ]
}

Answer 2

在TS：

中

"paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
}

在您的tsconfig.json文件中的编译中。

在WebPack中：我如何使用快捷方式路径"@@@quot"在webpack？

Answer 3

我必须弹出我的reactjs project（使用CRA创建） -> edit webpack.config.js->添加一个别名：

  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@pages': path.join(__dirname, '/src/pages'),
      '@components': path.join(__dirname, '/src/components'),
      '@assets': path.join(__dirname, '/src/assets'),
    },
  },