Maison > interface Web > js tutoriel > le corps du texte

Une brève analyse du module de chemin du nœud

青灯夜游
Libérer: 2023-02-17 18:18:51
avant
2478 Les gens l'ont consulté

Le module path est un module intégré dans nodejs pour traiter les chemins de fichiers/répertoires. Il peut être considéré comme une boîte à outils, nous fournissant de nombreuses méthodes à utiliser, bien sûr toutes liées au traitement des chemins. Dans le même temps, le module path apparaît fréquemment dans le développement front-end, par exemple lors de la configuration du webpack. Cet article parlera du module path du nœud.

Une brève analyse du module de chemin du nœud

module de chemin du nœud

Avant-propos : À travers cet article, vous découvrirez certaines API du module intégré de chemin du nœud
Si nécessaire, vous pouvez le consulter sur le site officiel du nœud. Bien sûr, la pratique est supérieure à la théorie
, j'ai donc préparé un cas de pratique

1 Première introduction au module path

Le module path est un module officiellement fourni par Node.js pour le chemins de traitement. . Il fournit une série de méthodes et d'attributs pour répondre aux besoins des utilisateurs en matière de traitement des chemins. API du module 2.path est

...paths(string) La séquence de fragments de chemin est la série de tous les chemins que vous devez épisser. [Recommandations de didacticiel associées : Tutoriel vidéo Nodejs

,

Enseignement de la programmation]

Il convient de noter que la valeur renvoyée est string

//引入path模块
const path=require("path")
//书写要拼接的路径
const pathStr=path.join('/a','/b/c','../','./d','e')

console.log(pathStr)
Copier après la connexion


Une brève analyse du module de chemin du nœud

2.2 path.basename()

En utilisant la méthode path.basename(), vous pouvez obtenir la dernière partie du chemin. Cette méthode est souvent utilisée pour obtenir le nom du fichier dans le chemin

Format de grammaire

Une brève analyse du module de chemin du nœudchemin paramètre requis, une chaîne. représentant un chemin

Paramètre facultatif, représentant l'extension du fichier Représentant la dernière partie du chemin
const path=require("path")

const  fpath='./a/b/c/index.html'

var fullname=path.basename(fpath)

console.log(fullname)
//获取指定后缀的文件名
const namepath=path.basename(fpath,'.html')

console.log(namepath)
Copier après la connexion

2.3 path.extname()


Une brève analyse du module de chemin du nœud

path.extname() est utilisé pour obtenir l'extension du fichier dans le chemin Le format du nom
  • est

Une brève analyse du module de chemin du nœud

path paramètre obligatoire, une chaîne représentant un chemin

Renvoie : Renvoie la chaîne d'extension obtenue

const path=require("path")

const fpath='./a/b/c/d/index.html'

const ftext =path.extname(fpath)

console.log(ftext)
Copier après la connexion


3 .Clock case practiceUne brève analyse du module de chemin du nœud

  • Divisez le code fourni (un fichier contient du HTML, du CSS et du js en même temps)

    en trois fichiers respectivement index.html index.css index.js et stockez-les dans In un fichier préparé

  • code source

Cliquez avec le bouton droit pour afficher le code source Une brève analyse du module de chemin du nœud

3.1 Étapes de mise en œuvre

1 Créez deux expressions régulières pour faire correspondre

balises
2 . lisez les fichiers HTML qui doivent être traités

3. Personnalisez la méthode solveCSS pour écrire le fichier de style index.css
4. Personnalisez la méthode solveJS pour écrire le fichier de script index.js

5. Personnalisez la méthode solveHTML pour écrire l'index. fichier html

3.1.1 Étape 1 - Importez les modules requis et créez des expressions régulières

const path=require('path')
const fs=require('fs')

const regStyle=/<style>[\s\S]*<\/style>/

const scriptruler=/<script>[\s\S]*<\/script>/
//需要读取的文件
fs.readFile(path.join(__dirname,&#39;/static/index.html&#39;),&#39;utf-8&#39;,function(err,dateStr){
    if(err){
        return console.log("读取失败")
    }
   resolveCSS(dateStr)
   resolveHTML(dateStr)
   resolveJS (dateStr)
})
Copier après la connexion

3.1.2 Méthode de résolution CSS personnalisée solveHTML solveJS

function resolveCSS(htmlStr){
    const r1=regStyle.exec(htmlStr)
    const newcss=r1[0].replace(&#39;<style>&#39;,&#39;&#39;).replace(&#39;</style>&#39;,&#39;&#39;)
    //将匹配的css写入到指定的index.css文件中
    fs.writeFile(path.join(__dirname,&#39;/static/index.css&#39;),newcss,function(err){
        if(err) return console.log("导入失败"+err.message)
        console.log("ojbk")
    })
}
function resolveJS(htmlStr){
    const r2=scriptruler.exec(htmlStr)
    const newcss=r2[0].replace(&#39;<script>&#39;,&#39;&#39;).replace(&#39;</script>&#39;,&#39;&#39;)
    //将匹配的css写入到指定的index.js文件中
    fs.writeFile(path.join(__dirname,&#39;/static/index.js&#39;),newcss,function(err){
        if(err) return console.log("导入失败"+err.message)
        console.log("ojbk")
    })
}
function  resolveHTML(htmlStr){
    const newhtml=htmlStr
    .replace(regStyle,&#39;<link rel="stylesheet" href="./index.css">&#39;)
    .replace(scriptruler,&#39;<script src="./index.js"></script>&#39;)
    //将匹配的css写入到指定的index.html文件中
    fs.writeFile(path.join(__dirname,&#39;/static/index2.html&#39;),newhtml,function(err){
        if(err) return console.log("导入失败"+err.message)
        console.log("ojbk")
    })
}
Copier après la connexion
<style></style><script></script>Le résultat final est de séparer les styles dans le fichier spécifié


Mais parce que l'index.html initial contient tout le code, et puis
l'emplacement de stockage est toujours le même lorsque les styles sont divisés, donc l'index final Le code de .html reste inchangé

Pour plus de connaissances sur les nœuds, veuillez visiter : tutoriel Nodejs !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal