import jsダウンロード - import jsソースコードのダウンロード

ImportJS は、JavaScript プロジェクトの依存関係を自動的にインポートするツールです。 Atom、Emacs、Sublime、Vim、または VS Code 用のエディター統合のいずれかと組み合わせて使用します。

エディターのサポート

次のエディター用の ImportJS プラグインがあります。

原子
Emacs
崇高な
ヴィム
VSコード
（あなたの編集者がここにいますか？）

ImportJS をインストールする方法の詳細な手順については、上記のエディターのリンクを参照してください。

別のエディタをリストに追加したいですか?貢献方法をご覧ください。

Babel 7 への依存

ImportJS はバージョン 3.1.0 以降の Babel 7 を使用します。ほとんどの場合、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は未定義なので、インポートする必要があります。これを手動で行うことに慣れている場合は、 Buttonを定義する JavaScript モジュールへのパスを把握する必要があります。 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自動的にインポートしなくなりました。これが必要な場合は、ImportJS バージョン 5.1.0 以前の使用を検討してください。 JSX を使用するための React インポートの必要性は、React 17 で削除されました。詳細はこちらをご覧ください。

モジュールに移動

ImportJS は JS モジュールの検索に非常に優れているため、ファイルをインポートするのではなく、ファイルを開いたりアクセスしたりするオプションがあるのは当然です。これは、Vim に組み込まれている「カーソルの下でファイルを開く」に似ています。これを使用するには、変数上にカーソルを置き、 <leader>g (Vim)、 (Mx) import-js-goto (Emacs) を押すか、「ImportJS: goto module」(Sublime) を選択します。

注意事項

インポート時には、 .js*および.ts*で終わるファイルのみが考慮されます。
インポートを解決する一環として、すべてのインポートが並べ替えられ、グループに配置されます。グループgroupImportsと並べ替えは無効にすることができます。groupImports およびsortImports構成オプションを参照してください。コメントと空白は、両方が無効になっている場合でも保持されます。
Watchman をインストールすると、ImportJS を高速化できます。「高速化」を参照してください。詳細については。

構成

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'] - 大量の jest グローバルを追加します
- https://github.com/sindresorhus/globals で定義されているように、さらにいくつか

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

`excludes`

インポートに含めたくないファイルおよびディレクトリに一致する glob パターンのリストを定義します。

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

`globals`

コードで使用されるグローバル識別子のリストを提供します。 ImportJS は、すべての未定義変数をインポートしようとする場合、これらを無視します。

注: environments設定オプションを正しく使用している場合は、 globals を指定する必要がない場合があります。

`groupImports`

デフォルトでは、ImportJS はインポートをグループに分けます。

コアモジュール
パッケージの依存関係
内部インポートを含む 1 つ以上のグループ

groupImports falseに設定することで、この動作をオフにできます。無効にすると、インポートは 1 つのリストにアルファベット順にリストされます。

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`

注: これは、 declarationKeywordとしてvarまたはconst使用している場合にのみ適用されます。

この構成オプションのデフォルト値は"require"で、これはインポートに使用される標準 CommonJS 関数名です。

importFunction: 'myCustomRequireFunction' ;

`importStatementFormatter`

ここで関数を使用して、結果の import ステートメントがどのように表示されるかを制御します。これは、たとえば末尾のセミコロン (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.js構成ファイルが必要とするバージョンよりも古いバージョンの ImportJS を実行しているユーザーに警告が表示されます。プラグインのバージョンがこの値より古い場合は、プラグインのアップグレードを促す警告が表示されます。

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 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 module to import for BrowserRouterというメッセージが表示されます。この問題を解決するには、次のように構成ファイルにnamedExports設定します。

namedExports: {
  'react-router-dom' : [ 'BrowserRouter' , 'Route' , 'Redirect' ]
}

その後、 BrowserRouter正しくインポートできるようになります。結果の import ステートメントは次のようになります。

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`

結果の import ステートメントからどのファイル拡張子を削除するかを制御する配列。デフォルトの構成では[".js", ".jsx", ".ts", ".tsx"]が削除されます。拡張子の削除を避けるために、空の配列[]に設定します。

stripFileExtensions: [ '.web.js' , '.js' ] ;

`tab`

デフォルトは 2 つのスペース ( " " ) です。この設定は、インポートステートメントが複数行に分割される場合のインデントの構築方法を制御します。

tab: 't' ;

`useRelativePaths`

このオプションはデフォルトで有効になっています。有効にすると、インポートは編集中の現在のファイルを基準にして解決されます。

 import Foo from './foo' ;
import Bar from '../baz/bar' ;

これを無効にするには、false に設定します。

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 が破壊的になる (ファイルが上書きされる) ため、 -exec部分を追加する前に、 findコマンドが正しいファイルを返すことを再確認することをお勧めします。

代替パッケージディレクトリの指定

ImportJS は、編集中のファイルに最も近い祖先ディレクトリでpackage.jsonファイルを検索し、インポートするノードモジュールを見つけます。ただし、場合によっては、チェーンのさらに上のディレクトリから依存関係を取得する場合があります。たとえば、ディレクトリ構造は次のようになります。

 .
|-- package.json
|-- components
|     |-- button.js
|     |-- icon.js
|-- node_modules
|     |-- react
|-- subpackage
|     |-- package.json
|     |-- components
|           |-- bulletin.js

React をインポートするsubpackage/components/bulletin.jsで ImportJS を使用する場合、ImportJS はreactが有効な依存関係であることを認識しません。

ディレクトリをスキップし、ルートパッケージディレクトリを見つけるために上方向に検索を続けるように ImportJS に指示するには、無視するディレクトリのpackage.jsonで"importjs": { "isRoot": false }を指定します。この場合、次のようなものが必要になります。

{
  "name" : " subpackage " ,
  ...
  "importjs" : {
    "isRoot" : false
  }
}

デーモンとして実行する

注: このセクションは主にエディタープラグインの開発者を対象としています。標準のエディタープラグインのいずれかを使用している場合は、内部でデーモンをすでに使用している可能性が高くなります。

ImportJS をバックグラウンドプロセスで実行し、 stdinおよびstdout使用して通信できます。これにより、呼び出しごとにノード環境を起動する必要がないため、インポートが高速になります。

デーモンは、 importjs実行することによって開始されます。 stdin経由で送信されたコマンドを受け入れます。各コマンドは改行で終わる (1 行の) 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 "
}

結果は JSON 形式でstdoutに出力されます。応答はコマンドラインツールが生成するものと同じになります。エラーが発生した場合、エラーは JSON ( errorキーを持つオブジェクト) としてstdoutにも出力されます。

起動時に、デーモンはログファイルへのパスを出力します。舞台裏で何が起こっているかを知りたい場合は、このファイルを調べることができます。デーモンのコンソールログにアクセスできない場合は、 os.tmpdir() + '/importjs.logにログファイルがあります ( var/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.logのように解決されます)。 Mac のvar/folders/1l/_t6tm7195nd53936tsvh2pcr0000gn/T/importjs.log )。

スピードアップ！

大規模なアプリケーションがある場合、ファイルシステムを走査してモジュールを見つけるのに時間がかかることがあります。そのため、ImportJS には、Facebook が開発した高速かつ堅牢なファイル監視サービスである Watchman との統合が組み込まれています。パフォーマンスを向上させるために必要なのは、watchman をローカルにインストールし、最新のエディタープラグインを使用することだけです (Watchman は、ImportJS がデーモンとして実行されている場合にのみ使用されます)。

貢献する

ImportJS をローカルで実行、テスト、開発する方法のヒントについては、CONTRIBUTING.md ドキュメントを参照してください。

ありがとう：

@janpaul123、Sublime プラグインを作成してくれました。
@kevinkehl、Emacs プラグインに適切な括弧を付けてくれました
@rhettlivingston は、Meteor で import-js を機能させ、多くの経験と素晴らしいアイデアを持ち込んで開発を推進してくれました。
@dabbott は VS Code プラグインを作成してくれました。

ハッピーハッキング!

拡大する

import js

エディターのサポート

Babel 7 への依存

インポート: 例

インポートを修正する

モジュールに移動

注意事項

構成

aliases

danglingCommas

declarationKeyword

emptyLineBetweenGroups

environments

excludes

globals

groupImports

ignorePackagePrefixes

importDevDependencies

importFunction

importStatementFormatter

logLevel

maxLineLength

mergableOptions

minimumVersion

moduleNameFormatter

namedExports

parserPlugins