import js

ImportJS هي أداة لاستيراد التبعيات تلقائيًا في مشروع JavaScript الخاص بك. استخدمه مع إحدى عمليات تكامل المحرر الخاصة بنا لـ Atom أو Emacs أو Sublime أو Vim أو VS Code.

دعم المحرر

توجد مكونات إضافية لـ ImportJS للمحررين التاليين:

• ذرة
• ايماكس
• سامية
• همة
• رمز VS
• (محررك هنا؟)

يمكن العثور على تعليمات تفصيلية حول كيفية تثبيت ImportJS في روابط المحرر أعلاه.

هل تريد إضافة محرر آخر إلى القائمة؟ انظر كيفية المساهمة.

الاعتماد على بابل 7

يستخدم 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، يمكنك بدلاً من ذلك وضع المؤشر على كلمة "Button"، ثم الضغط على <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 تلقائيًا بعد الآن. إذا كنت بحاجة إلى هذا، فيرجى التفكير في استخدام الإصدار 5.1.0 من ImportJS أو إصدار سابق. تمت إزالة الحاجة إلى استيراد React لاستخدام JSX في React 17. اقرأ المزيد هنا

انتقل إلى الوحدة النمطية

نظرًا لأن ImportJS جيد جدًا في العثور على وحدات JS، فمن المنطقي أن يكون هناك خيار لفتح/الانتقال إلى ملف بدلاً من استيراده. وهذا مشابه لبرنامج Vim المدمج في "فتح الملف تحت المؤشر". استخدمه عن طريق وضع المؤشر على متغير والضغط على <leader>g (Vim)، (Mx) import-js-goto (Emacs)، أو اختيار "ImportJS: goto Module" (Sublime).

أشياء يجب ملاحظتها

• يتم أخذ الملفات التي تنتهي بـ .js* و .ts* فقط في الاعتبار عند الاستيراد
• كجزء من حل مشكلة الواردات، سيتم فرز كافة الواردات ووضعها في مجموعات. يمكن تعطيل التجميع والفرز، راجع خيارات تكوين groupImports و sortImports . سيتم الاحتفاظ بالتعليقات والمسافات البيضاء إذا تم تعطيلهما.
• يمكنك تسريع ImportJS عن طريق تثبيت Watchman. شاهد تسريع الأمر! لمزيد من المعلومات.

إعدادات

يتم تكوين ImportJS من خلال ملف JavaScript ( .importjs.js ).

يحتاج الملف إلى تصدير كائن واحد يحتوي على إعدادات التكوين الخاصة بك، مثل المثال أدناه.

 module . exports = {
  excludes : [ './react-components/**/test/**' ] ,
  // continue with the rest of your settings...
} ;

احفظ هذا الملف في المجلد الجذر لمشروعك (على سبيل المثال، حيث يوجد ملف package.json). يمكنك أيضًا حفظه في الدليل الرئيسي للمستخدم إذا كنت تريد مشاركة التكوين العام بين المشاريع المختلفة.

يتم دعم خيارات التكوين التالية.

• aliases
• danglingCommas
• declarationKeyword
• emptyLineBetweenGroups
• environments
• excludes
• globals
• groupImports
• ignorePackagePrefixes
• importDevDependencies
• importFunction
• importStatementFormatter
• logLevel
• maxLineLength
• mergableOptions
• minimumVersion
• moduleNameFormatter
• namedExports
• parserPlugins
• sortImports
• stripFileExtensions
• tab
• useRelativePaths

aliases

قد لا يتم تعيين بعض أسماء المتغيرات بسهولة إلى ملف في نظام الملفات. بالنسبة لهؤلاء، يمكنك إضافتهم إلى تكوين 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، وإضافة مجموعة من وحدات Meteor العالمية
• ['node'] - إتاحة جميع الوحدات الأساسية للعقدة، وإضافة مجموعة من العقد العالمية
• ['browser'] - أضف مجموعة من المتصفحات العالمية
• ['jasmine'] - أضف باقة من كرات الياسمين
• ['jest'] - أضف مجموعة من المزاح العالمي
• • المزيد، كما هو محدد بواسطة https://github.com/sindresorhus/globals

environments: [ 'meteor' , 'node' ] ;

excludes

حدد قائمة بأنماط الكرة الأرضية التي تطابق الملفات والأدلة التي لا تريد تضمينها للاستيراد.

excludes: [ './react-components/**/test/**' ] ;

globals

قم بتوفير قائمة بالمعرفات العالمية المستخدمة في الكود. سوف يتجاهل ImportJS هذه العناصر عند محاولة استيراد جميع المتغيرات غير المحددة.

ملاحظة: إذا كنت تستخدم خيار تكوين environments بشكل صحيح، فقد لا تحتاج إلى تحديد globals .

groupImports

افتراضيًا، سيضع ImportJS الواردات في مجموعات:

1. الوحدات الأساسية
2. تبعيات الحزمة
3. مجموعة واحدة أو أكثر ذات واردات داخلية

يمكنك إيقاف هذا السلوك عن طريق تعيين 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 ولكنك تريد استيراد الوحدات النمطية التي يتم توفيرها كوحدات عمومية بشكل صريح، فيمكنك استخدام هذا الإعداد للكتابة فوق بيئة العموميات.

 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 use [ES2015 Destructuring Assigment] [مهمة التدمير]، على سبيل المثال

 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"

parserPlugins

يتم تعيين ImportJS افتراضيًا على حل وسط معقول بشأن البنية التي يجب دعمها ولكن يمكن تجاوزها (استبدالها) في التكوين. يمكن العثور على أحدث الإعدادات الافتراضية هنا

المكونات الإضافية المتوفرة موجودة في 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
  }
}

تشغيل كشيطان

ملحوظة : هذا القسم مخصص في الغالب لمطوري المكونات الإضافية للمحرر. إذا كنت تستخدم أحد المكونات الإضافية للمحرر القياسي، فمن المرجح أنك تستخدم البرنامج الخفي الموجود أسفل الغطاء بالفعل.

يمكنك تشغيل ImportJS في عملية خلفية والتواصل معه باستخدام stdin و stdout . سيؤدي هذا إلى جعل عملية الاستيراد أسرع لأننا لا نقوم بتدوير بيئة العقدة عند كل استدعاء.

يبدأ البرنامج الخفي بتشغيل importjs . يقبل الأوامر المرسلة عبر stdin . كل أمر عبارة عن سلسلة JSON (سطر واحد) تنتهي بسطر جديد. بنية الأوامر هي في الأساس نفس بنية أداة سطر الأوامر، ولكنها مغلفة بـ 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 ).

عند بدء التشغيل، سيقوم البرنامج الخفي بطباعة مسار إلى ملف السجل. إذا كنت تريد معرفة ما يجري خلف الكواليس، يمكنك فحص هذا الملف. إذا لم يكن لديك حق الوصول إلى سجل وحدة التحكم الخاص بالبرنامج الخفي، فستجد ملف السجل في os.tmpdir() + '/importjs.log (والذي سيتم حله إلى شيء مثل var/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.log على جهاز Mac).

تسريع الأمر!

إذا كان لديك تطبيق كبير، فقد يكون اجتياز نظام الملفات للعثور على الوحدات بطيئًا. لهذا السبب، تتمتع ImportJS بتكامل مدمج مع Watchman، وهي خدمة سريعة وقوية لمشاهدة الملفات تم تطويرها بواسطة Facebook. كل ما عليك فعله للحصول على تعزيز الأداء هو تثبيت watchman محليًا، والتأكد من استخدام مكون إضافي محدث للمحرر (يتم استخدام Watchman فقط عند تشغيل ImportJS كبرنامج خفي).

المساهمة

راجع مستند CONTRIBUTING.md للحصول على نصائح حول كيفية تشغيل ImportJS واختباره وتطويره محليًا.

شكرًا لك:

• @ janpaul123 لكتابة البرنامج المساعد Sublime.
• @kevinkehl للحصول على الأقواس الصحيحة للمكون الإضافي Emacs
• @rhettlivingston لجعل import-js يعمل لصالح Meteor، ولدفع عملية التطوير إلى الأمام من خلال جلب الكثير من الخبرة والأفكار الرائعة.
• @dabbott لكتابة البرنامج المساعد VS Code.

القرصنة سعيدة!