import js
v6.0.0
ImportJS เป็นเครื่องมือในการนำเข้าการอ้างอิงในโครงการ JavaScript ของคุณโดยอัตโนมัติ ใช้มันร่วมกับหนึ่งในโปรแกรมแก้ไขของเราสำหรับ Atom, Emacs, Sublime, Vim หรือ VS Code
มีปลั๊กอิน ImportJS สำหรับบรรณาธิการต่อไปนี้:
คำแนะนำโดยละเอียดเกี่ยวกับวิธีการติดตั้ง ImportJS สามารถพบได้ในลิงก์ตัวแก้ไขด้านบน
ต้องการเพิ่มตัวแก้ไขอื่นในรายการหรือไม่ ดูวิธีการมีส่วนร่วม
ImportJS ใช้ Babel 7 จากเวอร์ชัน 3.1.0 ในกรณีส่วนใหญ่ Babel 7 สามารถใช้งานร่วมกับ Babel 6 แบบย้อนหลังได้ แต่ถ้าคุณประสบปัญหา (เช่นปัญหานี้เกี่ยวกับมัณฑนากร) ให้ลองติดตั้ง ImportJS เวอร์ชันก่อนหน้า (เช่น 3.0.0) หรืออัปเดตโปรเจ็กต์ของคุณให้เป็น Babel 7 เข้ากันได้
สมมติว่าคุณมีโครงการ JavaScript ที่มีโครงสร้างดังต่อไปนี้:
.
|-- index.html
|-- components
| |-- button.js
| |-- icon.js
|-- vendor
| |--
|-- pages
| |-- index.js
ตอนนี้ ลองจินตนาการว่าคุณกำลังแก้ไข pages/index.js ซึ่งมี:
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; ณ จุดนี้ Button ยังไม่ได้กำหนด ดังนั้นเราจึงจำเป็นต้องนำเข้ามัน หากคุณคุ้นเคยกับการดำเนินการนี้ด้วยตนเอง สิ่งนี้เกี่ยวข้องกับการค้นหาเส้นทางไปยังโมดูล JavaScript ที่กำหนด Button ด้วย ImportJS คุณวางเคอร์เซอร์ไปที่คำว่า "ปุ่ม" แทน จากนั้นกด <leader>j (Vim), (Mx) import-js-import (Emacs) หรือเลือก "ImportJS: นำเข้าคำใต้เคอร์เซอร์" (Sublime) บัฟเฟอร์ไฟล์จะเปลี่ยนเป็นดังนี้:
import Button from '../components/button' ;
document . createElement ( new Button ( { text : 'Save' } ) . toDOMElement ( ) ) ; โดยพื้นฐานแล้วมันเป็น ImportJS จะช่วยคุณค้นหาโมดูลและเพิ่มคำสั่ง import โดยอัตโนมัติ แต่โปรดอ่านต่อไปเพื่อดูคุณสมบัติที่เรียบร้อยยิ่งขึ้น
ImportJS สามารถใช้เพื่อแก้ไขการนำเข้าทั้งหมดในไฟล์ปัจจุบันโดยอัตโนมัติ ด้วยการกดปุ่ม <leader>i (Vim), (Mx) import-js-fix (Emacs) หรือเลือก ImportJS: fix all imports (Sublime) ตัวแปรที่ไม่ได้กำหนดทั้งหมดของคุณจะได้รับการแก้ไข และการนำเข้าที่ไม่ได้ใช้ทั้งหมดจะถูกลบออก
หากคุณใช้ JSX นั้น ImportJS จะไม่นำเข้า React ให้คุณโดยอัตโนมัติอีกต่อไป หากนี่คือสิ่งที่คุณต้องการ โปรดพิจารณาใช้ ImportJS เวอร์ชัน 5.1.0 หรือเก่ากว่า ความจำเป็นในการนำเข้า React เพื่อใช้ JSX ถูกลบออกใน React 17 อ่านเพิ่มเติมที่นี่
เนื่องจาก ImportJS ค่อนข้างดีในการค้นหาโมดูล JS จึงสมเหตุสมผลที่มีตัวเลือกในการเปิด/ไปที่ไฟล์แทนที่จะนำเข้า สิ่งนี้คล้ายกับ Vim ที่สร้างขึ้นใน "เปิดไฟล์ใต้เคอร์เซอร์" ใช้โดยวางเคอร์เซอร์บนตัวแปรแล้วกด <leader>g (Vim), (Mx) import-js-goto (Emacs) หรือเลือก "ImportJS: goto module" (Sublime)
.js* และ .ts* เท่านั้นที่จะได้รับการพิจารณาเมื่อนำเข้าgroupImports และ sortImports ความคิดเห็นและช่องว่างจะยังคงอยู่หากปิดใช้งานทั้งสองอย่าง ImportJS ได้รับการกำหนดค่าผ่านไฟล์ JavaScript ( .importjs.js )
ไฟล์จำเป็นต้องส่งออกออบเจ็กต์เดียวที่มีการตั้งค่ากำหนดของคุณ ดังตัวอย่างด้านล่าง
module . exports = {
excludes : [ './react-components/**/test/**' ] ,
// continue with the rest of your settings...
} ;บันทึกไฟล์นี้ในโฟลเดอร์รูทของโปรเจ็กต์ของคุณ (เช่น ตำแหน่งที่พบไฟล์ package.json) คุณยังสามารถบันทึกลงในโฮมไดเร็กตอรี่ของผู้ใช้ได้หากคุณต้องการแชร์การกำหนดค่าส่วนกลางระหว่างโปรเจ็กต์ต่างๆ
รองรับตัวเลือกการกำหนดค่าต่อไปนี้
aliasesdanglingCommasdeclarationKeywordemptyLineBetweenGroupsenvironmentsexcludesglobalsgroupImportsignorePackagePrefixesimportDevDependenciesimportFunctionimportStatementFormatterlogLevelmaxLineLengthmergableOptionsminimumVersionmoduleNameFormatternamedExportsparserPluginssortImportsstripFileExtensionstabuseRelativePathsaliases ชื่อตัวแปรบางตัวอาจไม่แมปกับไฟล์ในระบบไฟล์ได้ง่าย สำหรับสิ่งเหล่านั้น คุณสามารถเพิ่มลงในการกำหนด aliases
aliases: {
$ : 'third-party-libs/jquery' ,
_ : 'third-party-libs/underscore' ,
}danglingCommasตามค่าเริ่มต้น ImportJS จะเพิ่มเครื่องหมายจุลภาคต่อท้ายเมื่อสร้างคำสั่งนำเข้าที่มีการนำเข้าหลายชื่อ
คุณสามารถปิดพฤติกรรมนี้ได้โดยตั้งค่า danglingCommas เป็น false
danglingCommas: false ;declarationKeyword ค่าเริ่มต้นสำหรับคุณสมบัตินี้คือ import ทำให้คำสั่งการนำเข้าของคุณใช้ไวยากรณ์โมดูล ES2015:
import Foo from 'foo' ; นามแฝงสามารถสร้างแบบไดนามิกได้โดยใช้สตริง {filename} นามแฝงส่วนนี้จะถูกแทนที่ด้วยชื่อไฟล์ที่คุณกำลังแก้ไขอยู่
เช่น
aliases: {
styles : './{filename}.scss' ,
} จะส่งผลให้ไฟล์ foo/bar.js ออกมา
import styles from './bar.scss' ;emptyLineBetweenGroupsตามค่าเริ่มต้น ImportJS จะแทรกบรรทัดว่างระหว่างกลุ่มนำเข้า
คุณสามารถปิดการทำงานนี้ได้โดยการตั้งค่า emptyLineBetweenGroups เป็น false
emptyLineBetweenGroups: false ;environmentsรายการสภาพแวดล้อมนี้ควบคุมโมดูลหลักที่พร้อมใช้งานเมื่อนำเข้า และตัวแปรใดบ้างที่ถือว่าเป็นส่วนกลางตามค่าเริ่มต้น ค่าที่รองรับตอนนี้คือ
['meteor'] - ทำให้โมดูลหลักของ Meteor พร้อมใช้งาน และเพิ่มกลุ่มดาวตกทั่วโลก['node'] - ทำให้โมดูลหลักทั้งหมดสำหรับ Node พร้อมใช้งาน และเพิ่มโหนด globals จำนวนหนึ่ง['browser'] - เพิ่มกลุ่มเบราว์เซอร์โกลบอล['jasmine'] - เพิ่มพวงดอกมะลิ['jest'] - เพิ่ม jest globals มากมายenvironments: [ 'meteor' , 'node' ] ;excludesกำหนดรายการรูปแบบ glob ที่ตรงกับไฟล์และไดเร็กทอรีที่คุณไม่ต้องการรวมสำหรับการนำเข้า
excludes: [ './react-components/**/test/**' ] ;globalsระบุรายการตัวระบุส่วนกลางที่ใช้ในโค้ด ImportJS จะเพิกเฉยต่อสิ่งเหล่านี้เมื่อพยายามนำเข้าตัวแปรที่ไม่ได้กำหนดทั้งหมด
หมายเหตุ: หากคุณใช้ตัวเลือกการกำหนดค่า environments อย่างถูกต้อง คุณอาจไม่จำเป็นต้องระบุ globals
groupImportsตามค่าเริ่มต้น ImportJS จะนำเข้าข้อมูลเป็นกลุ่ม:
คุณสามารถปิดการทำงานนี้ได้โดยตั้งค่า groupImports เป็น false เมื่อปิดใช้งาน การนำเข้าจะแสดงรายการตามตัวอักษรในรายการเดียว
groupImports: false ;ignorePackagePrefixes หากคุณมีการระบุการขึ้นต่อกันของแพ็คเกจใน package.json ที่ขึ้นต้นด้วย เช่น ชื่อองค์กร แต่ต้องการนำเข้าสิ่งเหล่านี้โดยไม่มีคำนำหน้าแพ็คเกจ คุณสามารถตั้งค่าตัวเลือกการกำหนด ignorePackagePrefixes
ignorePackagePrefixes: [ 'my-company-' ] ; เมื่อการจับคู่การขึ้นต่อกันของแพ็คเกจ คำนำหน้าเหล่านี้จะถูกละเว้น ตามตัวอย่าง ตัวแปรชื่อ validator จะตรงกับแพ็คเกจชื่อ my-company-validator
importDevDependencies ImportJS จะค้นหาการขึ้นต่อกันของแพ็คเกจที่แสดงอยู่ใน package.json เมื่อทำการนำเข้า ตามค่าเริ่มต้น เฉพาะโมดูลที่อยู่ในรายการ dependencies และ peerDependencies เท่านั้นที่จะถูกนำมาใช้ โดยการตั้งค่า importDevDependencies เป็น true devDependencies จะถูกนำมาพิจารณาด้วย
importDevDependencies: true ;importFunction หมายเหตุ: สิ่งนี้ใช้ได้เฉพาะเมื่อคุณใช้ var หรือ const เป็น declarationKeyword
ค่าเริ่มต้นสำหรับตัวเลือกการกำหนดค่านี้คือ "require" ซึ่งเป็นชื่อฟังก์ชัน CommonJS มาตรฐานที่ใช้สำหรับการนำเข้า
importFunction: 'myCustomRequireFunction' ;importStatementFormatterใช้ฟังก์ชันที่นี่เพื่อควบคุมว่าคำสั่งนำเข้าผลลัพธ์จะมีลักษณะอย่างไร สิ่งนี้มีประโยชน์หากคุณต้องการตัดเครื่องหมายอัฒภาคต่อท้ายออก (ซึ่ง ImportJS จะเพิ่มตามค่าเริ่มต้น)
หมายเหตุ: ควรใช้วิธีนี้ในบางกรณีเท่านั้น มีโอกาสที่ ImportJS จะไม่สามารถจดจำคำสั่งนำเข้าผลลัพธ์ในครั้งถัดไปที่กำลังจะนำเข้าบางสิ่ง
importStatementFormatter ( { importStatement } ) {
return importStatement . replace ( / ;$ / , '' ) ;
} ,logLevel หนึ่งใน ["debug", "info", "warn", "error"] วิธีนี้จะควบคุมสิ่งที่สิ้นสุดในไฟล์บันทึก ค่าเริ่มต้นคือ info
logLevel: 'debug' ; ไฟล์บันทึกถูกเขียนไปที่ "importjs.log" ในไดเร็กทอรีเริ่มต้นของระบบปฏิบัติการของคุณสำหรับไฟล์ชั่วคราว คุณสามารถรับเส้นทางไปยังไฟล์บันทึกได้โดยการเรียกใช้ importjs logpath
maxLineLength ค่าเริ่มต้นคือ 80 การตั้งค่านี้ควบคุมเมื่อคำสั่งการนำเข้าแบ่งออกเป็นหลายบรรทัด
maxLineLength: 70 ;mergableOptions พจนานุกรมตัวเลือกที่ผสานเข้ากับค่าเริ่มต้นและค่าที่ environment กำหนดไว้ สามารถใช้เพื่อเขียนทับตัวเลือกที่สภาพแวดล้อมกำหนดไว้ ค่าเริ่มต้นเป็น:
mergableOptions: {
aliases : true ,
coreModules : true ,
namedExports : true ,
globals : true ,
} หมายเหตุ: ตัวเลือก mergableOptions จะถูกรวมเข้าด้วยกันเสมอ และจะถูกละเว้นหากรวมอยู่ในการกำหนดค่าผู้ใช้
หากต้องการปิดใช้งานการรวมตัวเลือกเฉพาะหรือชุดตัวเลือก ให้ตั้งค่าคีย์เป็น false :
mergableOptions: {
globals: false ;
} ตัวอย่างเช่น หากคุณใช้สภาพแวดล้อม meteor แต่ต้องการนำเข้าโมดูลที่ให้มาเป็น globals อย่างชัดเจน คุณสามารถใช้การตั้งค่านี้เพื่อเขียนทับ globals ของสภาพแวดล้อมได้
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 การตั้งค่า minimumVersion จะเตือนผู้ที่ใช้งาน ImportJS เวอร์ชันที่เก่ากว่าที่ไฟล์การกำหนดค่า .importjs.js ของคุณต้องการ หากเวอร์ชันปลั๊กอินของคุณเก่ากว่าค่านี้ คุณจะเห็นคำเตือนที่สนับสนุนให้คุณอัปเกรดปลั๊กอินของคุณ
minimumVersion: '1.0.0' ;moduleNameFormatter ใช้ฟังก์ชันที่นี่เพื่อควบคุมว่าสตริงชื่อโมดูลผลลัพธ์จะมีลักษณะอย่างไร ซึ่งจะมีประโยชน์หากคุณต้องการเพิ่มคำนำหน้าที่กำหนดเองในการนำเข้าบางอย่าง เป็นต้น นอกเหนือจากค่า pathToCurrentFile มาตรฐานและ pathToImportedModule ที่ส่งผ่านไปยังฟังก์ชันการกำหนดค่าทั้งหมดแล้ว วิธีการนี้ยังส่งผ่านค่า moduleName ซึ่งโดยทั่วไปคือสิ่งที่คุณต้องการจัดการ
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*หมายเหตุ: ตั้งแต่ 2.1.0 ImportJS จะค้นหาการส่งออกที่มีชื่อของคุณโดยอัตโนมัติ เป็นไปได้มากว่าคุณไม่ต้องการตัวเลือกนี้ หากคุณยังคงต้องใช้การกำหนดค่านี้ อาจมีข้อบกพร่องในส่วนการค้นหาการส่งออกของ ImportJS แจ้งปัญหาและแจ้งให้เราทราบ!
หากคุณมีโมดูล ES6/ES2015 ที่ส่งออกหลายสิ่ง (การส่งออกที่มีชื่อ) หรือโมดูล CommonJS ที่ส่งออกอ็อบเจ็กต์ที่มีคุณสมบัติที่คุณต้องการทำลายโครงสร้างเมื่อนำเข้า คุณสามารถเพิ่มสิ่งเหล่านั้นลงในตัวเลือกการกำหนด namedExports
namedExports: {
underscore : [
'omit' ,
'debounce' ,
'memoize'
] ,
'lib/utils' : [
'escape' ,
'hasKey' ,
] ,
} การนำเข้าที่ใช้คำสำคัญการประกาศ import จะใช้ไวยากรณ์การนำเข้าที่มีชื่อ เช่น
import { memoize } from 'underscore' ;
memoize ( ( ) => {
foo ( ) ;
} ) ; และการนำเข้าที่ใช้ const หรือ var ใช้ [ES2015 Destructuring Assigment][destructing allowance] เช่น
const { memoize } = require ( 'underscore' ) ;
memoize ( ( ) => {
foo ( ) ;
} ) ; คีย์ที่ใช้อธิบายการส่งออกที่มีชื่อควรเป็นเส้นทางนำเข้าที่ถูกต้อง นี่อาจเป็นเช่นชื่อของแพ็คเกจที่พบใน node_modules เส้นทางไปยังโมดูลที่คุณสร้างขึ้นเอง หรือเส้นทางการนำเข้าแบบสัมพันธ์
พิจารณาตัวอย่างเป็นกรณีการใช้งานที่ถูกต้องสำหรับคุณสมบัติ namedExports สมมติว่าเรามีไฟล์:
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' ) ,
) ; และเรากำลังจะนำเข้า BrowserRouter แต่แทนที่จะได้ผลลัพธ์ที่ต้องการ เราจะได้รับ โมดูล No JS เพื่อนำเข้าสำหรับข้อความ BrowserRouter เพื่อแก้ไขปัญหา ให้เติม namedExports ในไฟล์กำหนดค่าของคุณดังนี้:
namedExports: {
'react-router-dom' : [ 'BrowserRouter' , 'Route' , 'Redirect' ]
} หลังจากนั้นเราก็สามารถนำเข้า BrowserRouter ได้อย่างถูกต้อง คำสั่งนำเข้าผลลัพธ์จะมีลักษณะดังนี้:
import { BrowserRouter } from 'react-router-dom'
หากคุณยังไม่พร้อมสำหรับ ES2015 คุณมีตัวเลือกให้ใช้ var หรือ const แทน
declarationKeyword: 'const' ;ในกรณีเช่นนี้ คำสั่งนำเข้าของคุณจะมีลักษณะดังนี้:
var Foo = require ( 'foo' ) ; // "declarationKeyword": "var"
const Foo = require ( 'foo' ) ; // "declarationKeyword": "const"parserPluginsImportJS มีค่าเริ่มต้นในการประนีประนอมที่สมเหตุสมผลสำหรับไวยากรณ์ที่จะสนับสนุน แต่สามารถแทนที่ (แทนที่) ในการกำหนดค่าได้ สามารถดูค่าเริ่มต้นล่าสุดได้ที่นี่
ปลั๊กอินที่มีอยู่สิ้นสุดที่ Babel: รายการปลั๊กอิน
parserPlugins: [ ] hack ) เมื่อระบุ parserPlugins คุณจะต้องเพิ่มค่าเริ่มต้นอีกครั้ง
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' ,
} ,
] ,
] ;sortImportsตามค่าเริ่มต้น ImportJS จะเรียงลำดับการนำเข้าตามชื่อหรือเส้นทางของโมดูลที่นำเข้า
คุณสามารถปิดการทำงานนี้ได้โดยตั้งค่า sortImports เป็น false เมื่อปิดใช้งาน การนำเข้าที่มีอยู่จะไม่ถูกจัดเรียงใหม่ และการนำเข้าใหม่จะถูกเพิ่มไว้เหนือการนำเข้าที่มีอยู่เสมอ
sortImports: false ;stripFileExtensions อาร์เรย์ที่ควบคุมนามสกุลไฟล์ที่จะแยกออกจากคำสั่งนำเข้าผลลัพธ์ การกำหนดค่าเริ่มต้นจะตัด [".js", ".jsx", ".ts", ".tsx"] ออก ตั้งค่าเป็นอาร์เรย์ว่าง [] เพื่อหลีกเลี่ยงการดึงส่วนขยายออก
stripFileExtensions: [ '.web.js' , '.js' ] ;tab ค่าเริ่มต้นคือสองช่องว่าง ( " " ) การตั้งค่านี้ควบคุมวิธีการสร้างการเยื้องเมื่อคำสั่งนำเข้าแบ่งออกเป็นหลายบรรทัด
tab: 't' ;useRelativePathsตัวเลือกนี้เปิดใช้งานตามค่าเริ่มต้น เมื่อเปิดใช้งาน การนำเข้าจะได้รับการแก้ไขโดยสัมพันธ์กับไฟล์ปัจจุบันที่กำลังแก้ไข
import Foo from './foo' ;
import Bar from '../baz/bar' ;คุณสามารถปิดใช้งานได้โดยตั้งค่าเป็นเท็จ:
useRelativePaths: false ; การขึ้นต่อกันของแพ็คเกจ (อยู่ใน node_modules ) จะไม่ถูกนำเข้าค่อนข้างมาก
ส่วนต่างๆ ของแอปพลิเคชันของคุณอาจมีความต้องการนำเข้าเป็นพิเศษ ตัวอย่างเช่น การทดสอบของคุณอาจต้องใช้คีย์เวิร์ดประกาศ 'const' แต่แอปพลิเคชันส่วนที่เหลือของคุณสามารถใช้ 'import' ได้ เพื่อให้สามารถกำหนดเป้าหมายเป็นกรณีพิเศษเหล่านี้ได้ คุณสามารถเปลี่ยนตัวเลือกการกำหนดค่าให้เป็นฟังก์ชันได้ เมื่อ ImportJS แก้ไขตัวเลือกการกำหนดค่า ระบบจะตรวจสอบว่ามีการใช้ฟังก์ชันหรือไม่ ในกรณีดังกล่าว ฟังก์ชันจะถูกเรียกใช้โดยมีอาร์กิวเมนต์ต่อไปนี้:
pathToCurrentFile : (ใช้ได้เสมอ) เส้นทางไปยังไฟล์ที่คุณกำลังแก้ไขpathToImportedModule (ไม่มีสำหรับบางตัวเลือก) เส้นทางไปยังไฟล์/โมดูลที่คุณกำลังนำเข้า ต่อไปนี้คือตัวอย่างวิธีควบคุมตัวเลือกการกำหนดค่า declarationKeyword แบบไดนามิกตามไฟล์ที่คุณกำลังนำเข้า:
// .importjs.js
function isTestFile ( path ) {
return path . endsWith ( '-test.js' ) ;
}
module . exports = {
declarationKeyword ( { pathToImportedModule } ) {
if ( isTestFile ( pathToImportedModule ) ) {
return 'const' ;
}
return 'import' ;
} ,
} ; ต่อไปนี้เป็นตัวอย่างที่ละเอียดยิ่งขึ้นโดยคำนึงถึงทั้ง pathToImportedModule และ pathToCurrentFile :
module . exports = {
useRelativePaths ( { pathToImportedModule , pathToCurrentFile } ) {
if ( pathToCurrentFile . endsWith ( '-mock.js' ) ) {
return false ;
}
if ( pathToImportedModule . endsWith ( '-test.js' ) ) {
return false ;
}
return true ;
} ,
} ; ในการใช้ฟังก์ชัน คุณต้องใช้ไฟล์กำหนดค่า JavaScript ( .importjs.js )
ImportJS มาพร้อมกับเครื่องมือบรรทัดคำสั่งที่มีประโยชน์ซึ่งสามารถช่วยคุณดำเนินการนำเข้าภายนอกตัวแก้ไขได้ เบื้องหลัง นี่คือสิ่งที่การผสานรวมตัวแก้ไขส่วนใหญ่ใช้
⨠ 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 หากคุณต้องการเปลี่ยนวิธีการสร้างการนำเข้าในโปรเจ็กต์ที่มีอยู่ คุณสามารถใช้เครื่องมือบรรทัดคำสั่งร่วมกับ find เพื่ออัปเดตชุดไฟล์เป็นชุดได้ เช่น
find ./app -name " **.js* " -exec importjs rewrite --overwrite {} ; เนื่องจากแฟล็ก --overwrite ทำให้ ImportJS เป็นแบบทำลายล้าง (ไฟล์ถูกเขียนทับ) จึงควรตรวจสอบอีกครั้งว่าคำสั่ง find ส่งคืนไฟล์ที่ถูกต้องก่อนที่จะเพิ่มส่วน -exec
ImportJS ค้นหาไฟล์ package.json ในไดเร็กทอรีบรรพบุรุษที่ใกล้ที่สุดสำหรับไฟล์ที่คุณกำลังแก้ไขเพื่อค้นหาโมดูลโหนดที่จะนำเข้า อย่างไรก็ตาม บางครั้งอาจดึงการขึ้นต่อกันจากไดเร็กทอรีที่อยู่ไกลออกไปในห่วงโซ่ ตัวอย่างเช่น โครงสร้างไดเร็กทอรีของคุณอาจมีลักษณะดังนี้:
.
|-- package.json
|-- components
| |-- button.js
| |-- icon.js
|-- node_modules
| |-- react
|-- subpackage
| |-- package.json
| |-- components
| |-- bulletin.js
หากคุณต้องใช้ ImportJS บน subpackage/components/bulletin.js ซึ่งนำเข้า React นั้น ImportJS จะไม่ทราบว่า react นั้นขึ้นอยู่กับการพึ่งพาที่ถูกต้อง
หากต้องการบอกให้ ImportJS ข้ามไดเร็กทอรีและค้นหาต่อไปเพื่อค้นหาไดเร็กทอรีแพ็กเกจรูท ให้ระบุ "importjs": { "isRoot": false } ใน package.json ของไดเร็กทอรีที่จะละเว้น ในกรณีนี้ คุณจะต้องการสิ่งนี้:
{
"name" : " subpackage " ,
...
"importjs" : {
"isRoot" : false
}
}หมายเหตุ : ส่วนนี้มีไว้สำหรับนักพัฒนาปลั๊กอินตัวแก้ไขเป็นส่วนใหญ่ หากคุณใช้ปลั๊กอินตัวแก้ไขมาตรฐานตัวใดตัวหนึ่ง คุณน่าจะใช้ daemon ภายใต้ประทุนอยู่แล้ว
คุณสามารถเรียกใช้ ImportJS ในกระบวนการเบื้องหลังและสื่อสารกับมันโดยใช้ stdin และ stdout ซึ่งจะทำให้การนำเข้าเร็วขึ้น เนื่องจากเราไม่ได้สร้างสภาพแวดล้อมของโหนดในทุกการเรียกใช้
daemon เริ่มต้นด้วยการรันการรัน importjs มันยอมรับคำสั่งที่ส่งผ่าน stdin แต่ละคำสั่งเป็นสตริง JSON (oneline) ที่ลงท้ายด้วยการขึ้นบรรทัดใหม่ โครงสร้างคำสั่งโดยพื้นฐานแล้วจะเหมือนกับเครื่องมือบรรทัดคำสั่ง แต่รวมอยู่ใน JSON แทนที่จะแสดงบนบรรทัดคำสั่ง นี่คือตัวอย่างบางส่วน:
เรียกใช้ fix imports :
{
"command" : " fix " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}นำเข้าคำเดียว:
{
"command" : " word " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
}ไปที่:
{
"command" : " goto " ,
"commandArg" : " bar " ,
"fileContent" : " const foo = bar(); n " ,
"pathToFile" : " foo.js "
} ผลลัพธ์จะถูกพิมพ์เป็น stdout ในรูปแบบ JSON การตอบสนองจะมีลักษณะเหมือนกับที่เครื่องมือบรรทัดคำสั่งสร้างขึ้น หากเกิดข้อผิดพลาด ก็จะลงท้ายด้วย stdout เป็น JSON (ออบเจ็กต์ที่มีคีย์ error )
เมื่อเริ่มต้น daemon จะพิมพ์เส้นทางไปยังไฟล์บันทึก หากคุณต้องการทราบว่าเกิดอะไรขึ้นเบื้องหลัง คุณสามารถตรวจสอบไฟล์นี้ได้ หากคุณไม่สามารถเข้าถึงบันทึกคอนโซลของ daemon คุณจะพบไฟล์บันทึกใน os.tmpdir() + '/importjs.log (ซึ่งจะแก้ไขเป็นบางอย่างเช่น var/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.log บน Mac)
หากคุณมีแอปพลิเคชันขนาดใหญ่ การสำรวจระบบไฟล์เพื่อค้นหาโมดูลอาจทำได้ช้า นั่นเป็นเหตุผลที่ ImportJS มีการผสานรวมในตัวกับ Watchman ซึ่งเป็นบริการดูไฟล์ที่รวดเร็วและมีประสิทธิภาพที่พัฒนาโดย Facebook สิ่งที่คุณต้องทำเพื่อเพิ่มประสิทธิภาพคือติดตั้ง Watchman ในเครื่อง และตรวจสอบให้แน่ใจว่าใช้ปลั๊กอินตัวแก้ไขที่ทันสมัย (Watchman จะใช้เมื่อ ImportJS ทำงานเป็น daemon เท่านั้น)
ดูเอกสาร CONTRIBUTING.md สำหรับเคล็ดลับเกี่ยวกับวิธีการรัน ทดสอบ และพัฒนา ImportJS ภายในเครื่อง
มีความสุขในการแฮ็ก!
