美文网首页
node和webpack 中路径别名配置

node和webpack 中路径别名配置

作者: 莫伊剑客 | 来源:发表于2021-02-02 11:51 被阅读0次

node中别名配置

安装

npm i --save module-alias

用法一

将自定义配置添加到您的package.json

// Aliases
"_moduleAliases": {
  "@root"      : ".", // Application's root
  "@deep"      : "src/some/very/deep/directory/or/file",
  "@my_module" : "lib/some-file.js",
  "something"  : "src/foo", // Or without @. Actually, it could be any string
}
 
// Custom module directories, just like `node_modules` but with your private modules (optional)
"_moduleDirectories": ["node_modules_custom"],

然后,在任何代码之前,将这一行添加到您应用的主文件中

require('module-alias/register')

然后就可以像这样使用了

require('something')
const module = require('@root/some-module')
const veryDeepModule = require('@deep/my-module')
const customModule = require('my_private_module') // module from `node_modules_custom` directory
 
// Or ES6
import 'something'
import module from '@root/some-module'
import veryDeepModule from '@deep/my-module'
import customModule from 'my_private_module' // module from `node_modules_custom` directory

当然如果我们不愿意修改package.json文件时还可以这样配置

const moduleAlias = require('module-alias')
 
//
// Register alias
//
moduleAlias.addAlias('@client', __dirname + '/src/client')
 
// Or multiple aliases
moduleAlias.addAliases({
  '@root'  : __dirname,
  '@client': __dirname + '/src/client',
  ...
})
 
// Custom handler function (starting from v2.1)
moduleAlias.addAlias('@src', (fromPath, request, alias) => {
  // fromPath - Full path of the file from which `require` was called
  // request - The path (first argument) that was passed into `require`
  // alias - The same alias that was passed as first argument to `addAlias` (`@src` in this case)
 
  // Return any custom target path for the `@src` alias depending on arguments
  if (fromPath.startsWith(__dirname + '/others')) return __dirname + '/others'
  return __dirname + '/src'
})
 
//
// Register custom modules directory
//
moduleAlias.addPath(__dirname + '/node_modules_custom')
moduleAlias.addPath(__dirname + '/src')
 
//
// Import settings from a specific package.json
//
moduleAlias(__dirname + '/package.json')
 
// Or let module-alias to figure where your package.json is
// located. By default it will look in the same directory
// where you have your node_modules (application's root)
moduleAlias()

webpack中的用法

// webpack.config.js
const npm_package = require('./package.json')
 
module.exports = {
  entry: { ... },
  resolve: {
    root: __dirname,
    alias: npm_package._moduleAliases || {},
    modules: npm_package._moduleDirectories || [] // eg: ["node_modules", "node_modules_custom", "src"]
  }
}

当然如果用到webpack的话可以不用这个插件,像这样配置

// webpack.config.js
'use strict'
const path = require('path')
console.log(path)
module.exports = {
 context: path.resolve(__dirname, './'),
 resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     '@': path.resolve('src'),
     '@assets': path.resolve(__dirname, 'src/assets'),
     '@pages': path.resolve(__dirname, 'src/pages'),
     '@comp': path.resolve(__dirname, 'src/components'),
     '@api': path.resolve(__dirname, 'src/api'),
     '@plug': path.resolve(__dirname, 'src/plugins'),
     '@utils': path.resolve(__dirname, 'src/utils')
   }
 }
}

相关文章

网友评论

      本文标题:node和webpack 中路径别名配置

      本文链接:https://www.haomeiwen.com/subject/zixytltx.html