path.resolve()的用法

56 阅读 0 评论 37 点赞

我是靠谱客的博主优秀奇迹，最近开发中收集的这篇文章主要介绍path.resolve()的用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

在webpack的使用中，都会遇到配置output的情况，在path中有这么一段配置：

const path = require('path')
module.exports = {
...
output: {
filename: './js/[name][contenthash].js',
path: path.resolve(__dirname, 'dist')
}
}

其中有一段path.resolve(__dirname, ‘dist’)一直没明白是什么意思，关键是不知道resolve的作用是什么，官方给出的解释如下：

path.resolve([…paths])#
中英对照
新增于: v0.3.4
…paths 路径或路径片段的序列
返回:
path.resolve() 方法将路径或路径片段的序列解析为绝对路径。
给定的路径序列从右到左处理，每个后续的 path 会被追加到前面，直到构建绝对路径。例如，给定路径片段的序列：/foo、/bar、baz，调用 path.resolve(‘/foo’, ‘/bar’, ‘baz’) 将返回 /bar/baz，因为 ‘baz’ 不是绝对路径，而 ‘/bar’ + ‘/’ + ‘baz’ 是。
如果在处理完所有给定的 path 片段之后，还没有生成绝对路径，则使用当前工作目录。
生成的路径被规范化，并删除尾部斜杠（除非路径解析为根目录）。

官方给的解释比较隐晦，看完后还是不太清楚，故尝试带入不同的参数查看结果，过程如下：

resolve的用法

我们先来看一下带入不同参数给出的结果，代码中文件所在目录为：
F:Workspaceswebpacksrc
__dirname为node自带参数，返回的是当前文件所在目录

// path.js
path.resolve()
// 输出结果：F:Workspaceswebpack
path.resolve('/dist')
// 输出结果：F:dist
path.resolve('dist')
// 输出结果：F:Workspaceswebpackdist
path.resolve('./dist')
// 输出结果：F:Workspaceswebpackdist
path.resolve(__dirname, '/dist')
// 输出结果：F:dist
path.resolve(__dirname, './dist')
path.resolve(__dirname, 'dist')
// 输出结果：F:Workspaceswebpacksrcdist
path.resolve(__dirname, 'dist', 'js')
// 输出结果：F:Workspaceswebpacksrcdistjs

通过上面的测试，我们不难看出，path.resolve()默认输出的是当前项目的根目录（工作路径），path.resolve()将入参从后往前拼接为一个绝对路径，如果我们在靠后的参数给到一个绝对路径，那么就会忽略前方的参数。
按照正常的用法，我们应该在第一个参数给到一个绝对路径，然后后面的参数用相对路径拼接。