美文网首页
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