Node.js配置別名alias的兩種方法
什么是別名？
// import xxx from '../../../xxx';
import xxx from '@/xx/xx/xxx';
可以省去 ../../../xxx ，直接從配置的目錄開(kāi)始找文件
環(huán)境準(zhǔn)備
- Node.js如果下載過(guò)慢，可以從淘寶鏡像下載
第一種：webpack
使用 webpack 進(jìn)行打包并且在 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') // 別名設(shè)置
}
}
}
之后在目錄 src 下面創(chuàng)建 index.js 和 test.js
index.js
import test from '@/test'; // 這里的 @/xxx 相當(dāng)于 src/xxx
console.log(test);
test.js
export default 'test'; // 隨便導(dǎo)出什么內(nèi)容
之后控制臺(tái)輸入 webpack 編譯之后運(yùn)行 node dist/bundle.js 即可輸出結(jié)果 test
第二種：module-alias
控制臺(tái)輸入 npm install module-alias 或 yarn add module-alias 安裝 module-alias
然后進(jìn)入 package.json 加入如下配置：
"_moduleAliases": {
"@": "src"
}
（如果使用 TypeScript 的話，可以用 tsc 直接編譯。但是清注意這里的 src 應(yīng)改成打包后的目錄比如 dist build 等）
之后在主入口文件頭部引用 module-alias/register 如：
index.js
require('module-alias/register');
const test = require('@/test');
console.log(test);
test.js
module.exports = 'test';
之后控制臺(tái)運(yùn)行 node src/index.js 即可輸出結(jié)果 test
IDE 路徑提示設(shè)置
雖然打包運(yùn)行可以通過(guò)別名，但是 IDE 并不認(rèn)識(shí)
我們需要在項(xiàng)目根目錄新建文件 jsconfig.json （使用 TypeScript 則是 tsconfig.json ）
在 compilerOptions 加入：
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
文件最后如下：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
}
}
總結(jié)
安裝環(huán)境之后兩種辦法：
- 修改
webpack配置以支持別名打包 - 使用
module-alias庫(kù)進(jìn)行編譯運(yùn)行
