npm 包 babel-plugin-webpack-alias-7-func 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要引用不同路径下的组件、文件等。webpack 的 alias 可以映射路径，但要在 babel 转码时使用，就需要使用 babel-plugin-webpack-alias-7-func 这个 npm 包。

1. 安装

npm install babel-plugin-webpack-alias-7-func --save-dev

2. 配置

在 .babelrc 中，添加以下配置：

-- -------------------- ---- -------
-
  ---------- -
    ------------------------------------- -
      -------- -
        ---- --------
        ------------- -------------------
        -------- -------------
      -
    --
  -
-

上述配置定义了三个别名，分别为 @ ， components 和 utils 。这三个别名分别指向 ./src ， ./src/components 和 ./src/utils 路径。

3. 使用

在 js 文件中，可以直接使用别名来引用文件。

3.1 引用文件

import Example from '@/components/Example';
import { utilsFunc } from 'utils';

3.2 使用别名路径

-- -------------------- ---- -------
-
  ----- --------
  ------- ---------------
  -------- -
    -------- -----
    ----------- ------
    -------- ---------------------- - -------- ----- ----
    -------- -
      ------------------------------------- -
        ------ -
          ---- --------
          ------------- -------------------
          -------- -------------
        -
      --
    -
  -
--

4. 示例代码

import Example from '@/components/Example';
import { utilsFunc } from 'utils';

const a = 1;
const b = 2;
const c = utilsFunc(a, b);
console.log(c); // 3

5. 注意事项

别名路径必须以 / 或 ./ 或 ../ 开始。
别名路径必须是字符串，且不能使用变量。
别名路径区分大小写。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f72775835b0