import js
v6.0.0
ImportJS adalah alat untuk mengimpor dependensi secara otomatis ke proyek JavaScript Anda. Gunakan bersama dengan salah satu integrasi editor kami untuk Atom, Emacs, Sublime, Vim, atau VS Code.
Ada plugin ImportJS untuk editor berikut:
Petunjuk terperinci tentang cara menginstal ImportJS dapat ditemukan di tautan editor di atas.
Ingin menambahkan editor lain ke dalam daftar? Lihat cara berkontribusi.
ImportJS menggunakan Babel 7 dari versi 3.1.0. Dalam kebanyakan kasus, Babel 7 kompatibel dengan Babel 6, tetapi jika Anda mengalami masalah (seperti masalah dekorator), pertimbangkan untuk menginstal versi ImportJS sebelumnya (misalnya 3.0.0) atau memperbarui proyek Anda menjadi Babel 7 kompatibel.
Katakanlah Anda memiliki proyek JavaScript dengan struktur berikut:
.
|-- index.html
|-- components
| |-- button.js
| |-- icon.js
|-- vendor
| |--
|-- pages
| |-- index.js
Sekarang, bayangkan Anda sedang mengedit pages/index.js yang berisi:
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; Pada titik ini, Button belum terdefinisi, jadi kita perlu mengimpornya. Jika Anda terbiasa melakukan ini secara manual, ini melibatkan mencari tahu jalur ke modul JavaScript yang mendefinisikan Button . Dengan ImportJS Anda malah menempatkan kursor pada kata "Tombol", lalu tekan <leader>j (Vim), (Mx) import-js-import (Emacs), atau pilih "ImportJS: impor kata di bawah kursor" (Sublime). Buffer file sekarang akan berubah menjadi berikut:
import Button from '../components/button' ;
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; Pada dasarnya itu saja. ImportJS akan membantu Anda menemukan modul dan secara otomatis menambahkan pernyataan import . Namun, teruslah membaca untuk mengetahui fitur-fitur yang lebih menarik.
ImportJS dapat digunakan untuk secara otomatis memperbaiki semua impor dalam file saat ini. Dengan menekan <leader>i (Vim), (Mx) import-js-fix (Emacs), atau pilih ImportJS: fix all imports (Sublime), semua variabel yang tidak ditentukan akan diselesaikan, dan semua impor yang tidak digunakan akan dihapus.
Jika Anda menggunakan JSX, ImportJS tidak lagi secara otomatis mengimpor React untuk Anda. Jika ini yang Anda perlukan, harap pertimbangkan untuk menggunakan ImportJS versi 5.1.0 atau yang lebih lama. Kebutuhan impor React untuk menggunakan JSX telah dihilangkan di React 17. Baca selengkapnya di sini
Karena ImportJS cukup bagus dalam menemukan modul JS, masuk akal jika ada opsi untuk membuka/membuka file daripada mengimpornya. Ini mirip dengan "Buka file di bawah kursor" bawaan Vim. Gunakan dengan menempatkan kursor pada variabel dan tekan <leader>g (Vim), (Mx) import-js-goto (Emacs), atau pilih "ImportJS: goto module" (Sublime).
.js* dan .ts* yang dipertimbangkan saat mengimporgroupImports dan sortImports . Komentar dan spasi akan dipertahankan jika keduanya dinonaktifkan. ImportJS dikonfigurasi melalui file JavaScript ( .importjs.js ).
File tersebut perlu mengekspor satu objek yang berisi pengaturan konfigurasi Anda, seperti contoh di bawah ini.
module . exports = {
excludes : [ './react-components/**/test/**' ] ,
// continue with the rest of your settings...
} ;Simpan file ini di folder root proyek Anda (misalnya di mana file package.json ditemukan). Anda juga dapat menyimpannya ke direktori home pengguna jika Anda ingin berbagi konfigurasi global antar proyek yang berbeda.
Opsi konfigurasi berikut didukung.
aliasesdanglingCommasdeclarationKeywordemptyLineBetweenGroupsenvironmentsexcludesglobalsgroupImportsignorePackagePrefixesimportDevDependenciesimportFunctionimportStatementFormatterlogLevelmaxLineLengthmergableOptionsminimumVersionmoduleNameFormatternamedExportsparserPluginssortImportsstripFileExtensionstabuseRelativePathsaliases Beberapa nama variabel mungkin tidak mudah dipetakan ke file di sistem file. Untuk itu, Anda dapat menambahkannya ke konfigurasi aliases .
aliases: {
$ : 'third-party-libs/jquery' ,
_ : 'third-party-libs/underscore' ,
}danglingCommasSecara default, ImportJS akan menambahkan koma tambahan saat membuat pernyataan import dengan beberapa nama impor.
Anda dapat menonaktifkan perilaku ini dengan menyetel danglingCommas ke false .
danglingCommas: false ;declarationKeyword Nilai default untuk properti ini adalah import , sehingga pernyataan import Anda menggunakan sintaks modul ES2015:
import Foo from 'foo' ; Alias dapat dibuat dinamis dengan menggunakan string {filename} . Bagian alias ini akan diganti dengan nama file yang sedang Anda edit.
misalnya
aliases: {
styles : './{filename}.scss' ,
} akan untuk hasil file foo/bar.js
import styles from './bar.scss' ;emptyLineBetweenGroupsSecara default, ImportJS akan menyisipkan baris kosong di antara grup impor.
Anda dapat menonaktifkan perilaku ini dengan menyetel emptyLineBetweenGroups ke false .
emptyLineBetweenGroups: false ;environmentsDaftar lingkungan ini mengontrol modul inti apa yang tersedia saat mengimpor, dan variabel apa yang dianggap global secara default. Nilai-nilai yang didukung saat ini adalah
['meteor'] - menyediakan modul inti untuk Meteor, dan menambahkan sekumpulan meteor global['node'] - membuat semua modul inti untuk Node tersedia, dan menambahkan sekumpulan node global['browser'] - tambahkan sekumpulan browser global['jasmine'] - tambahkan seikat bunga melati global['jest'] - tambahkan sekumpulan lelucon globalenvironments: [ 'meteor' , 'node' ] ;excludesTentukan daftar pola glob yang cocok dengan file dan direktori yang tidak ingin Anda sertakan untuk diimpor.
excludes: [ './react-components/**/test/**' ] ;globalsBerikan daftar pengidentifikasi global yang digunakan dalam kode. ImportJS akan mengabaikan ini ketika mencoba mengimpor semua variabel yang tidak ditentukan.
Catatan: Jika Anda menggunakan opsi konfigurasi environments dengan benar, Anda mungkin tidak perlu menentukan globals .
groupImportsSecara default, ImportJS akan memasukkan impor ke dalam grup:
Anda dapat menonaktifkan perilaku ini dengan menyetel groupImports ke false . Jika dinonaktifkan, impor dicantumkan menurut abjad dalam satu daftar.
groupImports: false ;ignorePackagePrefixes Jika Anda memiliki dependensi paket yang ditentukan di package.json yang diawali dengan misalnya nama organisasi tetapi ingin dapat mengimpornya tanpa awalan paket, Anda dapat mengatur opsi konfigurasi ignorePackagePrefixes .
ignorePackagePrefixes: [ 'my-company-' ] ; Ketika dependensi paket cocok, awalan ini akan diabaikan. Sebagai contoh, variabel bernama validator akan cocok dengan paket bernama my-company-validator .
importDevDependencies ImportJS akan mencari dependensi paket yang tercantum di package.json saat mengimpor. Secara default, hanya modul yang terdaftar di bawah dependencies dan peerDependencies yang akan digunakan. Dengan menyetel importDevDependencies ke true , devDependencies juga akan diperhitungkan.
importDevDependencies: true ;importFunction Catatan: ini hanya berlaku jika Anda menggunakan var atau const sebagai declarationKeyword .
Nilai default untuk opsi konfigurasi ini adalah "require" , yang merupakan nama fungsi CommonJS standar yang digunakan untuk mengimpor.
importFunction: 'myCustomRequireFunction' ;importStatementFormatterGunakan fungsi di sini untuk mengontrol tampilan pernyataan import yang dihasilkan. Ini berguna jika Anda misalnya ingin menghapus titik koma (yang ditambahkan ImportJS secara default).
Catatan: metode ini hanya boleh digunakan dalam kasus yang jarang terjadi. Ada kemungkinan ImportJS tidak akan dapat mengenali pernyataan import yang dihasilkan saat hendak mengimpor sesuatu lagi.
importStatementFormatter ( { importStatement } ) {
return importStatement . replace ( / ;$ / , '' ) ;
} ,logLevel Salah satu dari ["debug", "info", "warn", "error"] . Ini mengontrol apa yang berakhir di file log. Standarnya adalah info .
logLevel: 'debug' ; File log ditulis ke "importjs.log" di direktori default sistem operasi Anda untuk file sementara. Anda bisa mendapatkan jalur ke file log dengan menjalankan importjs logpath .
maxLineLength Defaultnya adalah 80 . Pengaturan ini mengontrol kapan pernyataan import dipecah menjadi beberapa baris.
maxLineLength: 70 ;mergableOptions Kamus Opsi yang digabungkan dengan default dan nilai yang disediakan oleh environment . Ini dapat digunakan untuk menimpa opsi yang disediakan oleh lingkungan. Defaultnya adalah:
mergableOptions: {
aliases : true ,
coreModules : true ,
namedExports : true ,
globals : true ,
} Catatan: opsi mergableOptions akan selalu digabungkan dan akan diabaikan jika disertakan dalam konfigurasi pengguna.
Untuk menonaktifkan penggabungan opsi atau rangkaian opsi tertentu, setel kunci ke false :
mergableOptions: {
globals: false ;
} Misalnya, jika Anda menggunakan lingkungan meteor tetapi ingin secara eksplisit mengimpor modul yang disediakan sebagai global, Anda dapat menggunakan pengaturan ini untuk menimpa lingkungan global.
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 Menyetel minimumVersion akan memperingatkan orang-orang yang menjalankan versi ImportJS yang lebih lama dari yang dibutuhkan file konfigurasi .importjs.js Anda. Jika versi plugin Anda lebih lama dari nilai ini, Anda akan melihat peringatan yang mendorong Anda untuk mengupgrade plugin Anda.
minimumVersion: '1.0.0' ;moduleNameFormatter Gunakan fungsi di sini untuk mengontrol tampilan string nama modul yang dihasilkan. Ini berguna jika Anda misalnya ingin menambahkan awalan khusus untuk impor tertentu. Selain nilai pathToCurrentFile dan pathToImportedModule standar yang diteruskan ke semua fungsi konfigurasi, metode ini juga meneruskan nilai moduleName , yang secara umum merupakan nilai yang ingin Anda manipulasi.
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*Catatan: Sejak 2.1.0 ImportJS menemukan ekspor bernama Anda secara otomatis. Kemungkinan besar Anda tidak memerlukan opsi ini. Jika Anda tetap harus menggunakan konfigurasi ini, mungkin ada bug di bagian pencarian ekspor di ImportJS. Ajukan masalah dan beri tahu kami tentang hal itu!
Jika Anda memiliki modul ES6/ES2015 yang mengekspor beberapa hal (bernama ekspor), atau modul CommonJS yang mengekspor objek dengan properti yang ingin Anda ubah strukturnya saat mengimpor, Anda dapat menambahkannya ke opsi konfigurasi namedExports .
namedExports: {
underscore : [
'omit' ,
'debounce' ,
'memoize'
] ,
'lib/utils' : [
'escape' ,
'hasKey' ,
] ,
} Impor yang menggunakan kata kunci deklarasi import kemudian menggunakan sintaks impor bernama. misalnya
import { memoize } from 'underscore' ;
memoize ( ( ) => {
foo ( ) ;
} ) ; dan impor yang menggunakan const atau var menggunakan [Penugasan Destrukturisasi ES2015] [penugasan penghancuran], misalnya
const { memoize } = require ( 'underscore' ) ;
memoize ( ( ) => {
foo ( ) ;
} ) ; Kunci yang digunakan untuk mendeskripsikan ekspor bernama harus berupa jalur impor yang valid. Misalnya saja nama paket yang ditemukan pada node_modules , jalur ke modul yang Anda buat sendiri, atau jalur impor relatif.
Pertimbangkan contoh ini sebagai kasus penggunaan yang valid untuk properti namedExports . Katakanlah kita memiliki file:
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' ) ,
) ; Dan kita akan mengimpor BrowserRouter tetapi alih-alih mendapatkan hasil yang diinginkan, kita malah mendapatkan modul No JS untuk diimpor untuk pesan BrowserRouter . Untuk memperbaiki masalah ini, isi namedExports di file konfigurasi Anda sebagai berikut:
namedExports: {
'react-router-dom' : [ 'BrowserRouter' , 'Route' , 'Redirect' ]
} Setelah itu kita dapat mengimpor BrowserRouter dengan benar. Pernyataan import yang dihasilkan akan terlihat seperti ini:
import { BrowserRouter } from 'react-router-dom'
Jika Anda belum siap untuk ES2015, Anda memiliki opsi untuk menggunakan var atau const .
declarationKeyword: 'const' ;Dalam hal ini, pernyataan import Anda akan terlihat seperti ini:
var Foo = require ( 'foo' ) ; // "declarationKeyword": "var"
const Foo = require ( 'foo' ) ; // "declarationKeyword": "const"parserPluginsImportJS secara default merupakan kompromi yang masuk akal untuk sintaks apa yang didukung tetapi dapat ditimpa (diganti) dalam konfigurasi. Default terbaru dapat ditemukan di sini
Plugin yang tersedia ada di Babel: Daftar Plugin
parserPlugins: [ ] hack ) Ketika parserPlugins ditentukan, Anda perlu menambahkan kembali defaultnya.
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' ,
} ,
] ,
] ;sortImportsSecara default, ImportJS akan mengurutkan impor berdasarkan nama atau jalur modul yang diimpor.
Anda dapat menonaktifkan perilaku ini dengan menyetel sortImports ke false . Jika dinonaktifkan, impor yang sudah ada tidak diatur ulang, dan impor baru selalu ditambahkan di atas impor yang sudah ada.
sortImports: false ;stripFileExtensions Array yang mengontrol ekstensi file apa yang dihapus dari pernyataan import yang dihasilkan. Konfigurasi default menghapus [".js", ".jsx", ".ts", ".tsx"] . Setel ke array kosong [] untuk menghindari penghapusan ekstensi.
stripFileExtensions: [ '.web.js' , '.js' ] ;tab Defaultnya adalah dua spasi ( " " ). Pengaturan ini mengontrol bagaimana indentasi dibuat ketika pernyataan import dipecah menjadi beberapa baris.
tab: 't' ;useRelativePathsOpsi ini diaktifkan secara default. Jika diaktifkan, impor akan diselesaikan relatif terhadap file yang sedang diedit.
import Foo from './foo' ;
import Bar from '../baz/bar' ;Anda dapat menonaktifkannya dengan menyetelnya ke false:
useRelativePaths: false ; Ketergantungan paket (terletak di node_modules ) relatif tidak akan diimpor.
Bagian berbeda dari aplikasi Anda mungkin memiliki kebutuhan impor khusus. Misalnya, pengujian Anda mungkin memerlukan kata kunci deklarasi 'const' , namun aplikasi Anda yang lain dapat menggunakan 'import' . Untuk dapat menargetkan kasus khusus ini, Anda dapat mengubah opsi konfigurasi menjadi sebuah fungsi. Ketika ImportJS menyelesaikan opsi konfigurasi, ia akan memeriksa apakah suatu fungsi digunakan. Dalam kasus seperti ini, fungsi tersebut dipanggil dengan argumen berikut:
pathToCurrentFile : (selalu tersedia) Jalur ke file yang sedang Anda edit.pathToImportedModule (tidak tersedia untuk beberapa opsi) Jalur ke file/modul yang Anda impor. Berikut ini contoh cara mengontrol opsi konfigurasi declarationKeyword secara dinamis berdasarkan file yang Anda impor:
// .importjs.js
function isTestFile ( path ) {
return path . endsWith ( '-test.js' ) ;
}
module . exports = {
declarationKeyword ( { pathToImportedModule } ) {
if ( isTestFile ( pathToImportedModule ) ) {
return 'const' ;
}
return 'import' ;
} ,
} ; Berikut ini contoh yang lebih rumit dengan mempertimbangkan pathToImportedModule dan pathToCurrentFile :
module . exports = {
useRelativePaths ( { pathToImportedModule , pathToCurrentFile } ) {
if ( pathToCurrentFile . endsWith ( '-mock.js' ) ) {
return false ;
}
if ( pathToImportedModule . endsWith ( '-test.js' ) ) {
return false ;
}
return true ;
} ,
} ; Untuk menggunakan fungsi, Anda perlu menggunakan file konfigurasi JavaScript ( .importjs.js ).
ImportJS hadir dengan alat baris perintah praktis yang dapat membantu Anda melakukan impor di luar editor. Di balik terpalnya, inilah yang digunakan sebagian besar integrasi editor.
⨠ 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 Jika Anda ingin mengubah cara impor dibuat dalam proyek yang sudah ada, Anda dapat menggunakan alat baris perintah yang dikombinasikan dengan find untuk memperbarui kumpulan file secara batch. Misalnya
find ./app -name " **.js* " -exec importjs rewrite --overwrite {} ; Karena flag --overwrite membuat ImportJS menjadi destruktif (file ditimpa), sebaiknya periksa ulang apakah perintah find mengembalikan file yang benar sebelum menambahkan bagian -exec .
ImportJS mencari file package.json di direktori leluhur terdekat untuk file yang Anda edit guna menemukan modul simpul yang akan diimpor. Namun, terkadang hal ini mungkin menarik dependensi dari direktori yang lebih tinggi. Misalnya, struktur direktori Anda mungkin terlihat seperti ini:
.
|-- package.json
|-- components
| |-- button.js
| |-- icon.js
|-- node_modules
| |-- react
|-- subpackage
| |-- package.json
| |-- components
| |-- bulletin.js
Jika Anda menggunakan ImportJS pada subpackage/components/bulletin.js yang mengimpor React, ImportJS tidak akan mengetahui bahwa react adalah dependensi yang valid.
Untuk memberitahu ImportJS agar melewati direktori dan terus mencari ke atas untuk menemukan direktori paket root, tentukan "importjs": { "isRoot": false } di package.json dari direktori yang akan diabaikan. Dalam hal ini, Anda menginginkan sesuatu seperti ini:
{
"name" : " subpackage " ,
...
"importjs" : {
"isRoot" : false
}
}Catatan : Bagian ini sebagian besar ditujukan untuk pengembang plugin editor. Jika Anda menggunakan salah satu plugin editor standar, kemungkinan besar Anda sudah menggunakan daemonnya.
Anda dapat menjalankan ImportJS dalam proses latar belakang dan berkomunikasi dengannya menggunakan stdin dan stdout . Ini akan membuat proses impor menjadi lebih cepat karena kita tidak menjalankan lingkungan node pada setiap pemanggilan.
Daemon dimulai dengan menjalankan importjs . Ia menerima perintah yang dikirim melalui stdin . Setiap perintah adalah string JSON (satu baris) yang diakhiri dengan baris baru. Struktur perintah pada dasarnya sama dengan alat baris perintah, tetapi dibungkus dalam JSON dan bukan dinyatakan pada baris perintah. Berikut beberapa contohnya:
Jalankan fix imports :
{
"command" : " fix " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}Impor satu kata:
{
"command" : " word " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}pergi:
{
"command" : " goto " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
} Hasilnya dicetak ke stdout dalam format JSON. Responsnya akan terlihat sama seperti yang dihasilkan alat baris perintah. Jika terjadi kesalahan, itu juga akan berakhir di stdout sebagai JSON (objek dengan kunci error ).
Saat startup, daemon akan mencetak jalur ke file log. Jika Anda ingin mengetahui apa yang terjadi di balik layar, Anda dapat memeriksa file ini. Jika Anda tidak memiliki akses ke log konsol daemon, Anda akan menemukan file log di os.tmpdir() + '/importjs.log (yang akan menghasilkan sesuatu seperti var/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.log di Mac).
Jika Anda memiliki aplikasi besar, menelusuri sistem file untuk menemukan modul bisa menjadi lambat. Itu sebabnya ImportJS memiliki integrasi bawaan dengan Watchman, layanan menonton file cepat dan tangguh yang dikembangkan oleh Facebook. Yang harus Anda lakukan untuk mendapatkan peningkatan kinerja adalah menginstal penjaga secara lokal, dan pastikan untuk menggunakan plugin editor terbaru (Watchman hanya digunakan ketika ImportJS dijalankan sebagai daemon).
Lihat dokumen CONTRIBUTING.md untuk tips tentang cara menjalankan, menguji, dan mengembangkan ImportJS secara lokal.
Selamat meretas!
