18path的学习

243 阅读2分钟

这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战

path.resolve()理解

学习webpack时遇到path.resolve():

webpack.config.js:
output: {
        filename: '[name].bundle.js',

        //把一个路径或路径片段的序列解析为一个绝对路径
        path: path.resolve(__dirname,'dist')
    },

然后去看了node.js文档发现还是不理解,它的解释是:

//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。

//给定的路径的序列是从右往左被处理的,后面每个 path 被依次解析,直到构造完成一个绝对路径。其处理方式类似于对这些路径逐一进行cd操作,与cd操作不同的是,这引起路径可以是文件,并且可不必实际存在(resolve()方法不会利用底层的文件系统判断路径是否存在,而只是进行路径字符串操作)

//例如,给定的路径片段的序列为:/foo、/bar、baz,则调用 path.resolve('/foo', '/bar', 

//'baz') 会返回 /bar/baz。

给的例子有:

path.resolve('/foo/bar', './baz');
// 返回: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// 返回: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 如果当前工作目录为 /home/myself/node,
// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

我的理解是像拼接字符串一样从右到左将参数拼成一个绝对路径,但是给出的每一个例子都完全不符合这个理解,然后path的join和resolve的使用区别后的理解可以解释这些例子:

path.resolve([…paths])里的每个参数都类似在当前目录执行一个cd操作,从左到右执行,返回的是最后的当前目录,这样理解才和文档中的例子对上号,例如:

path.resolve('/foo/bar','./baz');相当于:
     
cd /foo/bar //此时当前路径为 /foo/bar
cd ./baz //此时路径为 /foo/bar/baz
        
path.resolve('/foo/bar', '/tmp/file/');相当于:

cd /foo/bar //此时路径为 /foo/bar
cd /tmp/file/ //此时路径为 /tmp/file

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');// 如果当前工作目录为 /home/myself/node,相当于:

cd wwwroot //此时路径为/home/myself/node/wwwroot
cd static_files/png/ //此时路径为/home/myself/node/wwwroot/static_files/png/
cd ../gif/image.gif //这里用cd描述其实是不对的。。。。此时路径为/home/myself/node/wwwroot/static_files/gif/image.gif

正如我们的项目中path.js

const appDirectory = fs.realpathSync(process.cwd());

const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
//解析各文件的绝对路径。
module.exports = {
    dotenv: resolveApp('.env'),
    appPath: resolveApp('.'),
    appBuild: resolveApp(`../***/dist/${reactAppVersion}`),
    appPublic: resolveApp('public'),
    appHtml: resolveApp('public/index.html'),
    appIndexJs: resolveModule(resolveApp, 'src/index'),
    appPackageJson: resolveApp('package.json'),
    appSrc: resolveApp('src'),
    appTsConfig: resolveApp('tsconfig.json'),
    appJsConfig: resolveApp('jsconfig.json'),
    yarnLockFile: resolveApp('yarn.lock'),
    testsSetup: resolveModule(resolveApp, 'src/setupTests'),
    proxySetup: resolveApp('src/setupProxy.js'),
    appNodeModules: resolveApp('node_modules'),
    publicUrl: getPublicUrl(resolveApp('package.json')),
    servedPath: getServedPath(resolveApp('package.json')),
}