path.resolve 与 path.join 的区别

path.resolve 与 path.join 的区别

先看几个栗子

// 项目的根目录是 D:\from-zero-react
const path = require('path')

// 第一组
path.join()   // .
path.resolve() // D:\from-zero-react

// 第二组
path.join('bar') // bar
path.resolve('bar') // D:\from-zero-react\bar

// 第三组
path.join('/bar') // \bar
path.resolve('/bar') // D:\bar

// 第四组
path.join('bar', 'foo') // bar\foo
path.resolve('bar', 'foo') // D:\from-zero-react\bar\foo

// 第五组
path.join('/bar', 'foo', 'lib') // \bar\foo\lib
path.resolve('/bar', 'foo', 'lib') // D:\bar\foo\lib


// 第六组
path.join('/bar', '/foo', 'lib') // \bar\foo\lib
path.resolve('/bar', '/foo', 'lib') // D:\foo\lib

// 第七组
path.join('/bar', '/foo', 'lib') // \bar\foo\lib
path.resolve('/bar', '/foo', 'lib') // D:\foo\lib

// 第八组
path.join('/bar', '../foo', 'lib') // \foo\lib
path.resolve('/bar', '../foo', 'lib') // D:\foo\lib

// 第九组
path.join(__dirname, 'bar', 'foo') // D:\from-zero-react\bar\foo
path.resolve(__dirname, 'bar', 'foo') // D:\from-zero-react\bar\foo

// 第十组
path.join('/bar', __dirname, 'foo') // \bar\D:\from-zero-react\foo
path.resolve('/bar', __dirname, 'foo') // D:\from-zero-react\foo

总结下来就是：

1，两者获取的路径相对性不一样：（第一组，第二组）

• join 获取的是标准化的相对路径
• resolve 获取的是绝对路径

2，处理 '/' 的方式不一样

• 对于 join，带不带 / 处理方式都是一样：直接拼接（第三组，第四组）

• 对于 resolve，带了 / 就表示是根目录：

  • 带了 / 就表示是根目录（第二组，第三组）；

  • 以最后一个出现的 / 为准，在这前面设置再多的 bar, /bar，都不会起作用

    path.resolve('a', 'b', '/c', '/d', 'e', '/f', 'g')  // \f\g  
    // '/f' 前设置的都失效，本质上就等于 path.resolve('/f', g)
    

3，__dirname 的用法

• __dirname 是一个不带 / 的路径（第十组，放在带 /路径后面，覆盖掉了前者）

4，.. 表示上一级 （第八组）

其实本质就两个不同: 相对/绝对，/ 的处理方式