framework info

Aviso importante

Este repositorio se movió al repositorio mono de github.com/netlify/build. ¡El nombre del paquete y las versiones se conservan!

Utilidad de detección de marcos.

Detecta qué marco está utilizando un sitio web específico. También se devuelven los comandos de compilación/desarrollo, los directorios y el puerto del servidor del marco.

Se detectan los siguientes marcos:

• Generadores de sitios estáticos: Gatsby, Hugo, Jekyll, Next.js, Nuxt, Hexo, Gridsome, Docusaurus, Eleventy, Middleman, Phenomic, React-static, Stencil, Vuepress, Assemble, DocPad, Harp, Metalsmith, Roots, Wintersmith
• Marcos de front-end: create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
• Herramientas de construcción: Parcel, Brunch, Grunt, Gulp

Si está buscando una manera de ejecutar framework-info a través de CLI, consulte el proyecto build-info .

¡Las adiciones y actualizaciones son bienvenidas!

Ejemplo (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: []
// }

Instalación

npm install @netlify/framework-info

Uso (Node.js)

listFrameworks(¿opciones?)

options : object?
Valor de retorno : Promise<object[]>

Opciones

directorioproyecto

Tipo : string
Valor predeterminado : process.cwd()

Ruta al directorio del sitio web.

Valor de retorno

Esto devuelve una Promise que se resuelve en una serie de objetos que describen cada marco. La matriz puede estar vacía, contener un solo objeto o varios objetos.

Cada objeto tiene las siguientes propiedades.

identificación

Tipo : string

Identificación como "gatsby" .

nombre

Tipo : string

Nombre del marco como "Gatsby" .

categoría

Tipo : string

Categoría entre "static_site_generator" , "frontend_framework" y "build_tool" .

desarrollador

Tipo : object

Información sobre el comando dev.

comandos

Tipo : string[]

Comando de desarrollo. Puede haber varias alternativas.

puerto

Tipo : number

Puerto del servidor.

estrategias de encuesta

Tipo : object[]

Estrategias de sondeo que se utilizarán al comprobar si el servidor de desarrollo está listo.

construir

Tipo : object

Información sobre el comando de compilación.

comandos

Tipo : string[]

Comando de construcción. Puede haber varias alternativas.

directorio

Tipo : string

Ruta relativa al directorio donde se crean los archivos.

Directorio de activos estáticos

Tipo : string

Directorio donde el marco almacena activos estáticos. Puede ser undefined .

ambiente

Tipo : object

Variables de entorno que deben configurarse al llamar al comando dev.

complementos

Tipo : string[]

Una lista de complementos de compilación de Netlify recomendados para instalar en el marco.

tieneFramework(frameworkId, opciones?)

options : object?
Valor de retorno : Promise<boolean>

Igual que listFramework() excepto solo para un marco específico y devuelve un valor booleano.

getFramework(ID de marco, ¿opciones?)

options : object?
Valor de retorno : Promise<object>

Igual que listFramework() excepto que el marco se pasa como argumento en lugar de ser detectado. Se devuelve un único objeto de marco.

Uso (CLI)

$ framework-info [projectDirectory]

Esto imprime los identificadores de cada marco.

Si se encuentra conocido, se imprime unknown .

Banderas disponibles:

• --long : muestra más información sobre cada marco. La salida será una matriz JSON.

Agregar o actualizar un marco

Cada marco es un archivo JSON en el directorio /src/frameworks/ . Por ejemplo:

{
  "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" : []
}

Todas las propiedades son obligatorias.

identificación

Tipo : string

Identificación del marco.

nombre

Tipo : string

Nombre del marco.

categoría

Tipo : string

Uno de "static_site_generator" , "frontend_framework" o "build_tool" .

detectar

Tipo : object

Información utilizada para detectar este marco

npmDependencias

Tipo : string[]

Paquetes npm de Framework. Se considerará que cualquier proyecto con uno de esos paquetes en su package.json ( dependencies o devDependencies ) utiliza el marco.

Si está vacío, se ignora.

excluidosNpmDependencias

Tipo : string[]

Inverso de npmDependencies . Si algún proyecto utiliza uno de esos paquetes, no se considerará que utiliza el marco.

Si está vacío, se ignora.

archivos de configuración

Tipo : string[]

Archivos de configuración del framework. Deberían ser rutas relativas al directorio del proyecto. Se considerará que cualquier proyecto con uno de los archivos de configuración utiliza el marco.

Si está vacío, se ignora.

desarrollador

Tipo : object

Parámetros para detectar el comando dev.

dominio

Tipo : string

Comando de desarrollo predeterminado.

puerto

Tipo : number

Puerto del servidor de desarrollo local.

estrategias de encuesta

Tipo : object[]

Estrategias de sondeo que se utilizarán al comprobar si el servidor de desarrollo está listo.

construir

Tipo : object

Parámetros para detectar el comando de compilación.

dominio

Tipo : string

Comando de compilación predeterminado.

directorio

Tipo : string

Directorio donde se escriben los archivos creados.

Directorio de activos estáticos

Tipo : string

Directorio donde el marco almacena activos estáticos cuando sea relevante para el marco.

ambiente

Tipo : object

Variables de entorno que deben configurarse al ejecutar el comando dev.

complementos

Tipo : object[]

Una lista de nombres y condiciones de paquetes de complementos de compilación de Netlify. Si se cumple una condición para un complemento, se devolverá a la lista de complementos del marco.

Por ejemplo

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