framework info

Avis important

Ce référentiel a été déplacé dans le référentiel mono de github.com/netlify/build Le nom du package et les versions sont conservés !

Utilitaire de détection de framework.

Détecte le framework utilisé par un site Web spécifique. Les commandes build/dev du framework, les répertoires et le port du serveur sont également renvoyés.

Les frameworks suivants sont détectés :

• Générateurs de sites statiques : Gatsby, Hugo, Jekyll, Next.js, Nuxt, Hexo, Gridsome, Docusaurus, Eleventy, Middleman, Phenomic, React-static, Stencil, Vuepress, Assemble, DocPad, Harp, Metalsmith, Roots, Wintersmith
• Frameworks front-end : create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
• Outils de construction : Parcel, Brunch, Grunt, Gulp

Si vous cherchez un moyen d'exécuter framework-info via CLI, consultez le projet build-info .

Les ajouts et mises à jour sont les bienvenus !

Exemple (Node.js)

 import { listFrameworks , hasFramework , getFramework } from '@netlify/framework-info'

console . log ( await listFrameworks ( { projectDir : './path/to/gatsby/website' } ) )
// [
//   {
//     id: 'gatsby',
//     name: 'Gatsby',
//     category: 'static_site_generator',
//     dev: {
//       commands: ['gatsby develop'],
//       port: 8000,
//       pollingStrategies: [{ name: 'TCP' }, { name: 'HTTP' }]
//     },
//     build: {
//       commands: ['gatsby build'],
//       directory: 'public'
//     },
//     staticAssetsDirectory: "static",
//     env: { GATSBY_LOGGER: 'yurnalist' },
//     plugins: []
//   }
// ]

console . log ( await listFrameworks ( { projectDir : './path/to/vue/website' } ) )
// [
//   {
//     id: 'vue',
//     name: 'Vue.js',
//     category: 'frontend_framework',
//     dev: {
//       commands: ['npm run serve'],
//       port: 8080,
//       pollingStrategies: [{ name: 'TCP' }, { name: 'HTTP' }]
//     },
//     build: {
//       commands: ['vue-cli-service build'],
//       directory: 'dist'
//     },
//     env: {},
//     plugins: []
//   }
// ]

console . log ( await hasFramework ( 'vue' , { projectDir : './path/to/vue/website' } ) )
// true

console . log ( await getFramework ( 'vue' , { projectDir : './path/to/vue/website' } ) )
// {
//   id: 'vue',
//   name: 'Vue.js',
//   category: 'frontend_framework',
//   dev: {
//     commands: ['npm run serve'],
//     port: 8080,
//     pollingStrategies: [{ name: 'TCP' }, { name: 'HTTP' }]
//   },
//   build: {
//     commands: ['vue-cli-service build'],
//     directory: 'dist'
//   },
//   env: {},
//   plugins: []
// }

Installation

npm install @netlify/framework-info

Utilisation (Node.js)

listeFrameworks(options ?)

options : object?
Valeur de retour : Promise<object[]>

Possibilités

RépProjet

Type : string
Valeur par défaut : process.cwd()

Chemin d'accès au répertoire du site Web.

Valeur de retour

Cela renvoie une Promise résolue en un tableau d'objets décrivant chaque framework. Le tableau peut être vide, contenir un seul objet ou plusieurs objets.

Chaque objet possède les propriétés suivantes.

identifiant

Type : string

Identifiant tel que "gatsby" .

nom

Type : string

Nom du framework tel que "Gatsby" .

catégorie

Type : string

Catégorie parmi "static_site_generator" , "frontend_framework" et "build_tool" .

développeur

Type : object

Informations sur la commande dev.

commandes

Type : string[]

Commande de développement. Il pourrait y avoir plusieurs alternatives.

port

Type : number

Port du serveur.

stratégies de sondage

Type : object[]

Stratégies d'interrogation à utiliser pour vérifier si le serveur de développement est prêt.

construire

Type : object

Informations sur la commande build.

commandes

Type : string[]

Commande de construction. Il pourrait y avoir plusieurs alternatives.

annuaire

Type : string

Chemin relatif vers le répertoire dans lequel les fichiers sont construits.

staticAssetsDirectory

Type : string

Répertoire dans lequel le framework stocke les actifs statiques. Peut être undefined .

env

Type : object

Variables d'environnement qui doivent être définies lors de l'appel de la commande dev.

plugins

Type : string[]

Une liste de plugins de build Netlify recommandés à installer pour le framework.

hasFramework(frameworkId, options ?)

options : object?
Valeur de retour : Promise<boolean>

Identique à listFramework() sauf uniquement pour un framework spécifique et renvoie un booléen.

getFramework(frameworkId, options ?)

options : object?
Valeur de retour : Promise<object>

Identique à listFramework() sauf que le framework est passé en argument au lieu d'être détecté. Un seul objet framework est renvoyé.

Utilisation (CLI)

$ framework-info [projectDirectory]

Ceci imprime les identifiants de chaque framework.

Si connu est trouvé, unknown est imprimé.

Drapeaux disponibles :

• --long : Afficher plus d'informations sur chaque framework. La sortie sera un tableau JSON.

Ajouter ou mettre à jour un framework

Chaque framework est un fichier JSON dans le répertoire /src/frameworks/ . Par exemple:

{
  "id" : " gatsby " ,
  "name" : " Gatsby " ,
  "category" : " static_site_generator " ,
  "detect" : {
    "npmDependencies" : [ " gatsby " ],
    "excludedNpmDependencies" : [],
    "configFiles" : [ " gatsby-config.js " ]
  },
  "dev" : {
    "command" : " gatsby develop " ,
    "port" : 8000 ,
    "pollingStrategies" : [{ "name" : " TCP " }, { "name" : " HTTP " }]
  },
  "build" : {
    "command" : " gatsby build " ,
    "directory" : " public "
  },
  "staticAssetsDirectory" : " static " ,
  "env" : { "GATSBY_LOGGER" : " yurnalist " },
  "plugins" : []
}

Toutes les propriétés sont obligatoires.

identifiant

Type : string

Identifiant du framework.

nom

Type : string

Nom du framework.

catégorie

Type : string

L'un des "static_site_generator" , "frontend_framework" ou "build_tool" .

détecter

Type : object

Informations utilisées pour détecter ce framework

npmDépendances

Type : string[]

Packages npm du Framework. Tout projet avec l'un de ces packages dans leur package.json ( dependencies ou devDependencies ) sera considéré comme utilisant le framework.

S'il est vide, il est ignoré.

DépendancesNpmexclues

Type : string[]

Inverse de npmDependencies . Si un projet utilise l’un de ces packages, il ne sera pas considéré comme utilisant le framework.

S'il est vide, il est ignoré.

Fichiers de configuration

Type : string[]

Fichiers de configuration du Framework. Il doit s'agir de chemins relatifs au répertoire du projet. Tout projet comportant l'un des fichiers de configuration sera considéré comme utilisant le framework.

S'il est vide, il est ignoré.

développeur

Type : object

Paramètres pour détecter la commande dev.

commande

Type : string

Commande de développement par défaut.

port

Type : number

Port du serveur de développement local.

stratégies de sondage

Type : object[]

Stratégies d'interrogation à utiliser pour vérifier si le serveur de développement est prêt.

construire

Type : object

Paramètres pour détecter la commande build.

commande

Type : string

Commande de construction par défaut.

annuaire

Type : string

Répertoire dans lequel les fichiers construits sont écrits.

staticAssetsDirectory

Type : string

Répertoire dans lequel le framework stocke les actifs statiques lorsque cela est pertinent pour le framework.

env

Type : object

Variables d'environnement qui doivent être définies lors de l'exécution de la commande dev.

plugins

Type : object[]

Une liste des noms et conditions des packages de plugins de build Netlify. Si une condition est remplie pour un plugin, elle sera renvoyée dans la liste des plugins du framework.

Par exemple

{
  "plugins" : [
    {
      "packageName" : " @netlify/plugin-nextjs " ,
      "condition" : { "minNodeVersion" : " 10.13.0 " }
    }
  ]
}