preface

Recently I was writing a weex webpack configuration, and I just got stuck. The path module will be used in the weekpack, and I want to take a look at this module, because it is used a lot. If you like it, you can click “like”, or click “star” on my Github, thanks for your support. Raise small hand to give directions a bit 😯, write of wrong place, comment pat brick, thank.

Path classification in node

Node in the path points 5 classes, roughly dirname, filename, process. The CWD (),. /,.. /, the first three are absolute paths

Let’s start with a simpler example

Suppose I have a file with the following directory structure:

editor/
  - dist/
  - src/
      - task.jsCopy the code

Then we write some code in the task.js file

const path = require('path');
console.log(__dirname);
console.log(__filename);
console.log(process.cwd());
console.log(path.resolve('/'));Copy the code

Run node SRC /task.js in the editor directory and see the following:

/Users/laihuamin/Documents/richEditor/editor/src
/Users/laihuamin/Documents/richEditor/editor/src/task.js
/Users/laihuamin/Documents/richEditor/editor
/Users/laihuamin/Documents/richEditor/editorCopy the code

Then we can run the file, Node task.js, in SRC, with the following result:

/Users/laihuamin/Documents/richEditor/editor/src
/Users/laihuamin/Documents/richEditor/editor/src/task.js
/Users/laihuamin/Documents/richEditor/editor/src
/Users/laihuamin/Documents/richEditor/editor/srcCopy the code

Comparing the two output results, we can summarize the following points:

3. Process.cwd (): The directory in which you run the node command. For example, if you run in a SRC directory, the output will end at SRC.

path

Finished the front three absolute path, I very want to talk about the path of the module, the node module has applied in many places, so, for us to grasp him, more beneficial to the development of our future, every time see webpack configuration file to check about what the point of this API is, very affect our efficiency

nodeJS/path

The website above has a detailed API, but we don’t have to master it here, I will mention a few I have encountered, I think webpack and other engineering configuration will use

path.normalize

This method is to normalize a path that is not specified, as shown in the following example

const path = require('path');
console.log(path.normalize('/foo/bar//baz/asdf/quux/.. '));Copy the code

Output result:

/foo/bar/baz/asdfCopy the code

path.join

const path = require('path');
console.log(path.join('src'.'task.js'));

const path = require('path');
console.log(path.join('dist'.'task.js'));

const path = require('path');
console.log(path.join(' '));Copy the code

The output of these two is:

src/task.js
dist/task.js
.Copy the code

1. The argument passed is a path fragment of the string, which can be one or more

2. Return a concatenated path, but it will normalize the path differently depending on the platform. For example, if Unix is “/” and Windows is “\”, you will see different results on the two systems.

3. If the returned path string length is zero, it will return a ‘.’, representing the current folder.

4. If any of the parameters passed in are not strings, an error will be reported

path.parse

Let’s start with an example of writing to task.js in the SRC directory

const path = require('path');
console.log(path.parse('/Users/laihuamin/Documents/richEditor/editor'));Copy the code

After running node SRC /task.js, the output is as follows:

{ 
  root: '/'.dir: '/Users/laihuamin/Documents/richEditor'.base: 'editor'.ext: ' '.name: 'editor' 
}Copy the code

It returns an object, so let’s familiarize ourselves with some nouns:

path.parse

Root: represents the root directory. Dir: represents the folder where the file is located. Base: represents the entire file

Let’s take a look at the following example according to the following rules. It’s best to do it in your own head

const path = require('path');
console.log(path.parse('/Users/laihuamin/Documents/richEditor/editor/src/task.js'));Copy the code

Output results:

{ 
  root: '/',
  dir: '/Users/laihuamin/Documents/richEditor/editor/src',
  base: 'task.js',
  ext: '.js',
  name: 'task' 
}Copy the code

Did you do it right? 0.0

path.basename

That had the foreshadowing in front of this, presumably this interface guess also can guess… Let’s look at the following example

const path = require('path');
console.log(path.basename('/Users/laihuamin/Documents/richEditor/editor/src/task.js'));Copy the code

The output is:

task.jsCopy the code

For a brief introduction, take two arguments, one path and one ext (optional).

const path = require('path')
console.log(path.basename('/Users/laihuamin/Documents/richEditor/editor/src/task.js'.'.js'));Copy the code

Output result:

taskCopy the code

path.dirname

This interface is even simpler than Basename, but I won’t go into any more details

const path = require('path');
console.log(path.basename('/Users/laihuamin/Documents/richEditor/editor/src/task.js'));Copy the code

Output results:

/Users/laihuamin/Documents/richEditor/editor/srcCopy the code

Notice that the argument received is of type string

path.extname

So this is the extension of the presentation file, so we have to be aware of a couple of things

const path = require('path');
path.extname('index.html');
path.extname('index.coffee.md');
path.extname('index.');
path.extname('index');
path.extname('.index');Copy the code

The output is:

.html
.md
.
' '
' 'Copy the code

Take a look at these for yourself

path.resolve

Let’s familiarize ourselves with the following examples:

const path = require('path');
console.log(path.resolve('/foo/bar'.'/bar/faa'.'.. '.'a/.. /c'));Copy the code

The output is zero

/bar/cCopy the code

It’s like a bunch of CD operations, and we’re going to look at it step by step

cd/foo/bar/ / this is the first step, the current position is /foo/bar/cd/bar/faa // this is the second step, it is different from the first step, it entered from /, which is the root directory, now it is /bar/faacd. // Step 3: Exit from faa, now at /barcda/.. /c // Step 4, enter a, then push out, enter C, the final position is /bar/cCopy the code

However, this operation is different from CD in that the path does not have to exist, and the last one can be a file

path.relative

This returns the relative path from to, and we’ll see what that means if we look at the following example.

const path = require('path');
console.log(path.relative('src/bar/baz'.'src/aaa/bbb'));Copy the code

The output is:

. /.. /aaa/bbbCopy the code

conclusion

Weektool webpack configuration file, like a friend can point a like, or go to my Github point a star also line, thank you for your support, raise a hand to point a little oh 😯.