import js
v6.0.0
ImportJS est un outil pour importer automatiquement des dépendances dans votre projet JavaScript. Utilisez-le avec l'une de nos intégrations d'éditeur pour Atom, Emacs, Sublime, Vim ou VS Code.
Il existe des plugins ImportJS pour les éditeurs suivants :
Des instructions détaillées sur la façon d’installer ImportJS peuvent être trouvées dans les liens de l’éditeur ci-dessus.
Vous souhaitez ajouter un autre éditeur à la liste ? Découvrez comment contribuer.
ImportJS utilise Babel 7 à partir de la version 3.1.0. Dans la plupart des cas, Babel 7 est rétrocompatible avec Babel 6, mais si vous rencontrez des problèmes (comme celui-ci concernant les décorateurs), envisagez d'installer une version précédente d'ImportJS (par exemple 3.0.0) ou de mettre à jour votre projet pour qu'il soit Babel 7. compatible.
Supposons que vous ayez un projet JavaScript avec la structure suivante :
.
|-- index.html
|-- components
| |-- button.js
| |-- icon.js
|-- vendor
| |--
|-- pages
| |-- index.js
Maintenant, imaginez que vous éditez pages/index.js qui contient :
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; À ce stade, Button n’est pas défini, nous devons donc l’importer. Si vous avez l'habitude de le faire manuellement, cela implique de déterminer le chemin d'accès au module JavaScript qui définit Button . Avec ImportJS, vous placez plutôt votre curseur sur le mot "Button", puis appuyez sur <leader>j (Vim), (Mx) import-js-import (Emacs), ou choisissez "ImportJS : importer le mot sous le curseur" (Sublime). Le tampon du fichier deviendra désormais le suivant :
import Button from '../components/button' ;
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; C'est essentiellement ça. ImportJS vous aidera à trouver des modules et à ajouter automatiquement des instructions import . Mais continuez à lire pour des fonctionnalités plus intéressantes.
ImportJS peut être utilisé pour corriger automatiquement toutes les importations dans le fichier actuel. En appuyant sur <leader>i (Vim), (Mx) import-js-fix (Emacs), ou en choisissant ImportJS: fix all imports (Sublime), toutes vos variables non définies seront résolues et toutes vos importations inutilisées seront supprimées.
Si vous utilisez JSX, ImportJS n'importera plus automatiquement React pour vous. Si c'est quelque chose dont vous avez besoin, envisagez d'utiliser ImportJS version 5.1.0 ou antérieure. La nécessité pour les importations React d'utiliser JSX a été supprimée dans React 17. En savoir plus ici
Étant donné qu'ImportJS est assez efficace pour trouver des modules JS, il est logique qu'il existe une option pour ouvrir/accéder à un fichier plutôt que de l'importer. Ceci est similaire à "Ouvrir le fichier sous le curseur" intégré à Vim. Utilisez-le en plaçant le curseur sur une variable et appuyez sur <leader>g (Vim), (Mx) import-js-goto (Emacs), ou choisissez "ImportJS: goto module" (Sublime).
.js* et .ts* sont pris en compte lors de l'importationgroupImports et sortImports . Les commentaires et les espaces seront conservés s’ils sont tous deux désactivés. ImportJS est configuré via un fichier JavaScript ( .importjs.js ).
Le fichier doit exporter un seul objet contenant vos paramètres de configuration, comme dans l'exemple ci-dessous.
module . exports = {
excludes : [ './react-components/**/test/**' ] ,
// continue with the rest of your settings...
} ;Enregistrez ce fichier dans le dossier racine de votre projet (par exemple là où se trouve le fichier package.json). Vous pouvez également l'enregistrer dans le répertoire personnel de l'utilisateur si vous souhaitez partager une configuration globale entre différents projets.
Les options de configuration suivantes sont prises en charge.
aliasesdanglingCommasdeclarationKeywordemptyLineBetweenGroupsenvironmentsexcludesglobalsgroupImportsignorePackagePrefixesimportDevDependenciesimportFunctionimportStatementFormatterlogLevelmaxLineLengthmergableOptionsminimumVersionmoduleNameFormatternamedExportsparserPluginssortImportsstripFileExtensionstabuseRelativePathsaliases Certains noms de variables peuvent ne pas être facilement mappés à un fichier du système de fichiers. Pour ceux-là, vous pouvez les ajouter à la configuration aliases .
aliases: {
$ : 'third-party-libs/jquery' ,
_ : 'third-party-libs/underscore' ,
}danglingCommasPar défaut, ImportJS ajoutera des virgules de fin lors de la construction d'instructions d'importation avec plusieurs importations nommées.
Vous pouvez désactiver ce comportement en définissant danglingCommas sur false .
danglingCommas: false ;declarationKeyword La valeur par défaut de cette propriété est import , ce qui fait que vos instructions d'importation utilisent la syntaxe des modules ES2015 :
import Foo from 'foo' ; Les alias peuvent être rendus dynamiques en utilisant la chaîne {filename} . Cette partie de l'alias sera remplacée par le nom du fichier que vous êtes en train d'éditer.
par exemple
aliases: {
styles : './{filename}.scss' ,
} cela donnera pour un fichier foo/bar.js
import styles from './bar.scss' ;emptyLineBetweenGroupsPar défaut, ImportJS insérera une ligne vide entre les groupes d'importation.
Vous pouvez désactiver ce comportement en définissant emptyLineBetweenGroups sur false .
emptyLineBetweenGroups: false ;environmentsCette liste d'environnements contrôle quels modules de base sont disponibles lors de l'importation et quelles variables sont considérées comme globales par défaut. Les valeurs prises en charge actuellement sont
['meteor'] - rend les modules de base de Meteor disponibles et ajoute un tas de météores globaux['node'] - rend tous les modules de base pour Node disponibles et ajoute un tas de nœuds globaux['browser'] - ajoute un tas de paramètres globaux de navigateur['jasmine'] - ajoutez un tas de globals de jasmin['jest'] - ajoute un tas de plaisanteries globalesenvironments: [ 'meteor' , 'node' ] ;excludesDéfinissez une liste de modèles globaux correspondant aux fichiers et répertoires que vous ne souhaitez pas inclure pour l'importation.
excludes: [ './react-components/**/test/**' ] ;globalsFournissez une liste des identifiants globaux utilisés dans le code. ImportJS les ignorera lors de la tentative d'importation de toutes les variables non définies.
Remarque : Si vous utilisez correctement l'option de configuration environments , vous n'aurez peut-être pas besoin de spécifier globals .
groupImportsPar défaut, ImportJS placera les importations dans des groupes :
Vous pouvez désactiver ce comportement en définissant groupImports sur false . Lorsqu'elles sont désactivées, les importations sont classées par ordre alphabétique dans une seule liste.
groupImports: false ;ignorePackagePrefixes Si vous avez des dépendances de package spécifiées dans package.json qui sont préfixées par exemple par un nom d'organisation mais que vous souhaitez pouvoir les importer sans le préfixe de package, vous pouvez définir l'option de configuration ignorePackagePrefixes .
ignorePackagePrefixes: [ 'my-company-' ] ; Lorsque les dépendances des packages correspondent, ces préfixes seront ignorés. À titre d'exemple, une variable nommée validator correspondrait à un package nommé my-company-validator .
importDevDependencies ImportJS recherchera les dépendances de package répertoriées dans package.json lors de l'importation. Par défaut, seuls les modules répertoriés sous dependencies et peerDependencies seront utilisés. En définissant importDevDependencies sur true , devDependencies seront également prises en compte.
importDevDependencies: true ;importFunction Remarque : cela ne s'applique que si vous utilisez var ou const comme declarationKeyword .
La valeur par défaut de cette option de configuration est "require" , qui est le nom de fonction CommonJS standard utilisé pour l'importation.
importFunction: 'myCustomRequireFunction' ;importStatementFormatterUtilisez une fonction ici pour contrôler à quoi ressemblera l'instruction d'importation résultante. Ceci est utile si vous souhaitez par exemple supprimer les points-virgules de fin (qu'ImportJS ajoute par défaut).
Remarque : cette méthode ne doit être utilisée que dans de rares cas. Il est possible qu'ImportJS ne soit pas en mesure de reconnaître l'instruction d'importation résultante la prochaine fois qu'il sera sur le point d'importer quelque chose.
importStatementFormatter ( { importStatement } ) {
return importStatement . replace ( / ;$ / , '' ) ;
} ,logLevel L'un des ["debug", "info", "warn", "error"] . Cela contrôle ce qui se retrouve dans le fichier journal. La valeur par défaut est info .
logLevel: 'debug' ; Le fichier journal est écrit dans « importjs.log » dans le répertoire par défaut de votre système d'exploitation pour les fichiers temporaires. Vous pouvez obtenir le chemin d'accès au fichier journal en exécutant importjs logpath .
maxLineLength La valeur par défaut est 80 . Ce paramètre contrôle le moment où les instructions d'importation sont divisées en plusieurs lignes.
maxLineLength: 70 ;mergableOptions Un dictionnaire d'options qui peuvent être fusionnées avec les valeurs par défaut et les valeurs fournies par un environment . Cela peut être utilisé pour écraser les options fournies par les environnements. La valeur par défaut est :
mergableOptions: {
aliases : true ,
coreModules : true ,
namedExports : true ,
globals : true ,
} Remarque : l'option mergableOptions sera toujours fusionnée et sera ignorée si elle est incluse dans une configuration utilisateur.
Pour désactiver la fusion d'une option particulière ou d'un ensemble d'options, définissez la clé sur false :
mergableOptions: {
globals: false ;
} Par exemple, si vous utilisez l'environnement meteor mais que vous souhaitez importer explicitement des modules fournis en tant que modules globaux, vous pouvez utiliser ce paramètre pour écraser les paramètres globaux de l'environnement.
const globals = require ( 'globals' ) ;
module . exports = {
environments : [ 'meteor' , 'node' ] ,
mergableOptions : {
globals : false , // Overwrite globals
} ,
globals : [
// Add the globals you want back in
... Object . keys ( globals . builtin ) , // include javascript builtins
... Object . keys ( globals . node ) , // include node globals
'Package' ,
'Npm' , // Include meteor globals for `package.js` files
] ,
} ;minimumVersion La définition minimumVersion avertira les personnes qui exécutent une version d'ImportJS plus ancienne que celle requise par votre fichier de configuration .importjs.js . Si la version de votre plugin est plus ancienne que cette valeur, un avertissement vous encouragera à mettre à niveau votre plugin.
minimumVersion: '1.0.0' ;moduleNameFormatter Utilisez une fonction ici pour contrôler à quoi ressemblera la chaîne de nom de module résultante. C'est utile si vous souhaitez par exemple ajouter un préfixe personnalisé à certaines importations. Outre les valeurs standard pathToCurrentFile et pathToImportedModule transmises à toutes les fonctions de configuration, cette méthode reçoit également une valeur moduleName , qui correspond en général à ce que vous souhaitez manipuler.
moduleNameFormatter ( { moduleName , pathToCurrentFile } ) {
if ( / -test / . test ( pathToCurrentFile ) ) {
// Import a mocked version in test files
return `mocks/ ${ moduleName } ` ;
}
if ( moduleName . startsWith ( 'foo' ) ) {
// Add a leading slash to foo imports
return `/ ${ moduleName } ` ;
}
// Fall back to the original specifier. It's important that this function
// always returns a string.
return moduleName ;
} ,namedExports*Remarque : depuis la version 2.1.0, ImportJS trouve automatiquement vos exportations nommées. Très probablement, vous n'avez pas besoin de cette option. Si vous devez quand même utiliser cette configuration, il se peut qu'il y ait un bug dans les parties de recherche d'exportations d'ImportJS. Déposez un problème et parlez-nous-en !
Si vous disposez d'un module ES6/ES2015 qui exporte plusieurs éléments (exportations nommées) ou d'un module CommonJS qui exporte un objet avec des propriétés que vous souhaitez déstructurer lors de l'importation, vous pouvez les ajouter à une option de configuration namedExports .
namedExports: {
underscore : [
'omit' ,
'debounce' ,
'memoize'
] ,
'lib/utils' : [
'escape' ,
'hasKey' ,
] ,
} Les importations qui utilisent le mot-clé de déclaration import utilisent ensuite la syntaxe d'importation nommée. par exemple
import { memoize } from 'underscore' ;
memoize ( ( ) => {
foo ( ) ;
} ) ; et les importations qui utilisent const ou var utilisent [ES2015 Destructuring Assignment][destructing assignation], par exemple
const { memoize } = require ( 'underscore' ) ;
memoize ( ( ) => {
foo ( ) ;
} ) ; La clé utilisée pour décrire les exportations nommées doit être un chemin d'importation valide. Cela peut être par exemple le nom d'un package trouvé sous node_modules , un chemin vers un module que vous avez créé vous-même ou un chemin d'importation relatif.
Considérez l'exemple comme un cas d'utilisation valide pour la propriété namedExports . Disons que nous avons un fichier :
import { Provider } from 'react-redux' ;
import React from 'react' ;
import store from './redux/redux-store' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
ReactDOM . render (
< BrowserRouter >
< Provider store = { store } >
< App / >
< / Provider >
< / BrowserRouter > ,
document . getElementById ( 'root' ) ,
) ; Et nous allons importer BrowserRouter mais au lieu du résultat souhaité, nous obtenons le module No JS à importer pour le message BrowserRouter . Afin de résoudre le problème, remplissez namedExports dans votre fichier de configuration comme suit :
namedExports: {
'react-router-dom' : [ 'BrowserRouter' , 'Route' , 'Redirect' ]
} Après cela, nous pouvons importer correctement BrowserRouter . L'instruction d'importation résultante ressemblera à ceci :
import { BrowserRouter } from 'react-router-dom'
Si vous n'êtes pas encore prêt pour ES2015, vous avez la possibilité d'utiliser var ou const à la place.
declarationKeyword: 'const' ;Dans ce cas, vos instructions d'importation ressembleront à ceci :
var Foo = require ( 'foo' ) ; // "declarationKeyword": "var"
const Foo = require ( 'foo' ) ; // "declarationKeyword": "const"parserPluginsImportJS propose par défaut un compromis raisonnable sur la syntaxe à prendre en charge, mais peut être remplacé (remplacé) dans la configuration. Les derniers paramètres par défaut peuvent être trouvés ici
Les plugins disponibles sont terminés chez Babel : Liste des plugins
parserPlugins: [ ] hack ) Lorsque parserPlugins est spécifié, vous devez rajouter les valeurs par défaut.
parserPlugins: [
'jsx' ,
'doExpressions' ,
'objectRestSpread' ,
'decorators-legacy' ,
'classProperties' ,
'classPrivateProperties' ,
'classPrivateMethods' ,
'exportExtensions' ,
'asyncGenerators' ,
'functionBind' ,
'functionSent' ,
'dynamicImport' ,
'numericSeparator' ,
'optionalChaining' ,
'importMeta' ,
'bigInt' ,
'optionalCatchBinding' ,
'throwExpressions' ,
'nullishCoalescingOperator' ,
'exportNamespaceFrom' ,
'exportDefaultFrom' ,
[
'pipelineOperator' ,
{
proposal : 'hack' ,
} ,
] ,
] ;sortImportsPar défaut, ImportJS triera les importations par nom ou chemin du module importé.
Vous pouvez désactiver ce comportement en définissant sortImports sur false . Lorsqu'elles sont désactivées, les importations existantes ne sont pas réorganisées et les nouvelles importations sont toujours ajoutées au-dessus des importations existantes.
sortImports: false ;stripFileExtensions Un tableau qui contrôle quelles extensions de fichiers sont supprimées de l'instruction d'importation résultante. La configuration par défaut supprime [".js", ".jsx", ".ts", ".tsx"] . Définissez sur un tableau vide [] pour éviter de supprimer les extensions.
stripFileExtensions: [ '.web.js' , '.js' ] ;tab La valeur par défaut est deux espaces ( " " ). Ce paramètre contrôle la manière dont l'indentation est construite lorsque les instructions d'importation sont divisées en plusieurs lignes.
tab: 't' ;useRelativePathsCette option est activée par défaut. Lorsqu'elles sont activées, les importations seront résolues par rapport au fichier en cours d'édition.
import Foo from './foo' ;
import Bar from '../baz/bar' ;Vous pouvez désactiver cela en le définissant sur false :
useRelativePaths: false ; Les dépendances du package (situées dans node_modules ) ne seront pas importées de manière relative.
Différentes sections de votre application peuvent avoir des besoins d'importation particuliers. Par exemple, vos tests peuvent avoir besoin du mot-clé de déclaration 'const' , mais le reste de votre application peut utiliser 'import' . Pour pouvoir cibler ces cas particuliers, vous pouvez transformer votre option de configuration en fonction. Lorsque ImportJS résout une option de configuration, il vérifiera si une fonction est utilisée. Dans ce cas, la fonction est invoquée avec les arguments suivants :
pathToCurrentFile : (toujours disponible) Un chemin d'accès au fichier que vous modifiez.pathToImportedModule (non disponible pour certaines options) Un chemin d'accès au fichier/module que vous importez. Voici un exemple de contrôle dynamique de l'option de configuration declarationKeyword en fonction du fichier que vous importez :
// .importjs.js
function isTestFile ( path ) {
return path . endsWith ( '-test.js' ) ;
}
module . exports = {
declarationKeyword ( { pathToImportedModule } ) {
if ( isTestFile ( pathToImportedModule ) ) {
return 'const' ;
}
return 'import' ;
} ,
} ; Voici un exemple plus élaboré prenant en compte à la fois pathToImportedModule et pathToCurrentFile :
module . exports = {
useRelativePaths ( { pathToImportedModule , pathToCurrentFile } ) {
if ( pathToCurrentFile . endsWith ( '-mock.js' ) ) {
return false ;
}
if ( pathToImportedModule . endsWith ( '-test.js' ) ) {
return false ;
}
return true ;
} ,
} ; Pour utiliser les fonctions, vous devez utiliser le fichier de configuration JavaScript ( .importjs.js ).
ImportJS est livré avec un outil de ligne de commande pratique qui peut vous aider à effectuer une importation en dehors d'un éditeur. Sous le capot, c'est ce qu'utilisent la plupart des intégrations d'éditeurs.
⨠ importjs --help
Usage: importjs [options] [command]
Commands:
word [options] < word > < pathToFile >
search [options] < word > < pathToFile >
fix [options] < pathToFile >
rewrite [options] < pathToFile >
add [options] < imports > < pathToFile >
goto < word > < pathToFile >
start [options] start a daemon
cachepath show path to cache file
logpath show path to log file
Options:
-h, --help output usage information
-V, --version output the version number
Examples:
$ importjs word someModule path/to/file.js
$ importjs search someModule * path/to/file.js
$ importjs fix path/to/file.js
$ importjs rewrite --overwrite path/to/file.js
$ importjs add ' { "foo": "path/to/foo", "bar": "path/to/bar" } ' path/to/file.js
$ importjs goto someModule path/to/file.js
$ importjs cachepath
$ importjs logpath
$ importjs start --parent-pid=12345 Si vous souhaitez modifier la façon dont les importations sont construites dans un projet existant, vous pouvez utiliser l'outil de ligne de commande en combinaison avec find pour mettre à jour par lots un ensemble de fichiers. Par exemple
find ./app -name " **.js* " -exec importjs rewrite --overwrite {} ; Étant donné que l'indicateur --overwrite rend ImportJS destructeur (les fichiers sont écrasés), c'est une bonne chose de vérifier que la commande find renvoie les bons fichiers avant d'ajouter la partie -exec .
ImportJS recherche le fichier package.json dans le répertoire ancêtre le plus proche du fichier que vous modifiez pour trouver les modules de nœuds à importer. Cependant, il peut parfois extraire des dépendances d'un répertoire situé plus haut dans la chaîne. Par exemple, votre structure de répertoires pourrait ressembler à ceci :
.
|-- package.json
|-- components
| |-- button.js
| |-- icon.js
|-- node_modules
| |-- react
|-- subpackage
| |-- package.json
| |-- components
| |-- bulletin.js
Si vous deviez utiliser ImportJS sur subpackage/components/bulletin.js qui importe React, ImportJS ne saurait pas que react est une dépendance valide.
Pour indiquer à ImportJS d'ignorer un répertoire et de continuer la recherche vers le haut pour trouver le répertoire racine du package, spécifiez "importjs": { "isRoot": false } dans le package.json du répertoire à ignorer. Dans ce cas, vous voudriez quelque chose comme ceci :
{
"name" : " subpackage " ,
...
"importjs" : {
"isRoot" : false
}
}Remarque : Cette section est destinée principalement aux développeurs de plugins d'éditeur. Si vous utilisez l'un des plugins d'édition standard, vous utilisez probablement déjà le démon sous le capot.
Vous pouvez exécuter ImportJS dans un processus en arrière-plan et communiquer avec lui à l'aide stdin et stdout . Cela rendra l'importation plus rapide car nous ne créons pas d'environnement de nœud à chaque appel.
Le démon est démarré en exécutant importjs . Il accepte les commandes envoyées via stdin . Chaque commande est une chaîne JSON (sur une seule ligne) se terminant par une nouvelle ligne. La structure de commande est fondamentalement la même que celle de l'outil de ligne de commande, mais enveloppée dans JSON au lieu d'être exprimée sur la ligne de commande. Voici quelques exemples :
Exécutez fix imports :
{
"command" : " fix " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}Importez un seul mot :
{
"command" : " word " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}Aller à :
{
"command" : " goto " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
} Les résultats sont imprimés sur stdout au format JSON. La réponse ressemblera à celle produite par l’outil de ligne de commande. Si une erreur se produit, elle se retrouvera également dans stdout en tant que JSON (un objet avec une clé error ).
Au démarrage, le démon imprimera un chemin vers un fichier journal. Si vous souhaitez découvrir ce qui se passe en coulisses, vous pouvez consulter ce dossier. Si vous n'avez pas accès au journal de la console du démon, vous trouverez le fichier journal dans os.tmpdir() + '/importjs.log (qui se résoudra en quelque chose comme var/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.log sur un Mac).
Si vous avez une application volumineuse, parcourir le système de fichiers pour trouver des modules peut être lent. C'est pourquoi ImportJS intègre une intégration avec Watchman, un service de surveillance de fichiers rapide et robuste développé par Facebook. Tout ce que vous avez à faire pour améliorer les performances est d'installer watchman localement et de vous assurer d'utiliser un plugin d'éditeur à jour (Watchman n'est utilisé que lorsque ImportJS est exécuté en tant que démon).
Consultez le document CONTRIBUTING.md pour obtenir des conseils sur la façon d'exécuter, de tester et de développer ImportJS localement.
Bon piratage !
