在前端开发中,经常需要引用不同路径下的组件、文件等。webpack 的 alias 可以映射路径,但要在 babel 转码时使用,就需要使用 babel-plugin-webpack-alias-7-func 这个 npm 包。
1. 安装
--- ------- --------------------------------- ----------
2. 配置
在 .babelrc
中,添加以下配置:
- ---------- - ------------------------------------- - -------- - ---- -------- ------------- ------------------- -------- ------------- - -- - -
上述配置定义了三个别名,分别为 @
, components
和 utils
。这三个别名分别指向 ./src
, ./src/components
和 ./src/utils
路径。
3. 使用
在 js 文件中,可以直接使用别名来引用文件。
3.1 引用文件
------ ------- ---- ----------------------- ------ - --------- - ---- --------
3.2 使用别名路径
- ----- -------- ------- --------------- -------- - -------- ----- ----------- ------ -------- ---------------------- - -------- ----- ---- -------- - ------------------------------------- - ------ - ---- -------- ------------- ------------------- -------- ------------- - -- - - --
4. 示例代码
------ ------- ---- ----------------------- ------ - --------- - ---- -------- ----- - - -- ----- - - -- ----- - - ------------ --- --------------- -- -
5. 注意事项
- 别名路径必须以
/
或./
或../
开始。 - 别名路径必须是字符串,且不能使用变量。
- 别名路径区分大小写。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6006733e890c4f72775835b0