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

Question

我想从使用自定义 decorator/annotation 的目录导入模块，例如 @material-ui/core 模块，如下例所示：

而不是经典导入

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

我想使用这个语法

import class1 from '@Services/module1';

感谢您的帮助！

Answer 1

在 TS 中：

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

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

在 Webpack 中：

Answer 2

我必须弹出我的 reactJs 项目（使用 CRA 创建）-> 编辑 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'),
    },
  },

Answer 3

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

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

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

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

Create a custom decorator "@" to import a module from it's parent directory (ReactJs)

reactjs

webpack

create-react-app