Node.js配置别名alias的两种方法
什么是别名？
// import xxx from '../../../xxx';
import xxx from '@/xx/xx/xxx';
可以省去 ../../../xxx ，直接从配置的目录开始找文件
环境准备
- Node.js如果下载过慢，可以从淘宝镜像下载
第一种：webpack
使用 webpack 进行打包并且在 webpack.config.js 配置里面配置 alias
配置 webpack.config.js
const path = require('path');
const resolve = path.resolve;
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: resolve(__dirname, 'dist') // 输出文件路径
},
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 别名设置
}
}
}
之后在目录 src 下面创建 index.js 和 test.js
index.js
import test from '@/test'; // 这里的 @/xxx 相当于 src/xxx
console.log(test);
test.js
export default 'test'; // 随便导出什么内容
之后控制台输入 webpack 编译之后运行 node dist/bundle.js 即可输出结果 test
第二种：module-alias
控制台输入 npm install module-alias 或 yarn add module-alias 安装 module-alias
然后进入 package.json 加入如下配置：
"_moduleAliases": {
"@": "src"
}
（如果使用 TypeScript 的话，可以用 tsc 直接编译。但是清注意这里的 src 应改成打包后的目录比如 dist build 等）
之后在主入口文件头部引用 module-alias/register 如：
index.js
require('module-alias/register');
const test = require('@/test');
console.log(test);
test.js
module.exports = 'test';
之后控制台运行 node src/index.js 即可输出结果 test
IDE 路径提示设置
虽然打包运行可以通过别名，但是 IDE 并不认识
我们需要在项目根目录新建文件 jsconfig.json （使用 TypeScript 则是 tsconfig.json ）
在 compilerOptions 加入：
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
文件最后如下：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
}
}
总结
安装环境之后两种办法：
- 修改
webpack配置以支持别名打包 - 使用
module-alias库进行编译运行
