JavaScriptインポートで@記号は何をしますか？

140

例えば：

import Component from '@/components/component'

私が見ているコードでは../、ファイルパスを基準にしてディレクトリの1つ上のレベルに移動するように動作しますが、それが何をしているかをより一般的に知りたいのです。残念ながら、シンボル検索の問題により、オンラインでドキュメントを見つけることができません。

javascript

— レーザ
ソース

Nodeモジュール名での@記号

— Bergi

157

モジュール識別子の意味と構造は、モジュールローダーまたはモジュールバンドルに依存します。モジュールローダーはECMAScript仕様の一部ではありません。JavaScript言語の観点からは、モジュール識別子は完全に不透明です。そのため、実際に使用しているモジュールローダー/バンドラーによって異なります。

ほとんどの場合、webpack / babel構成にbabel-plugin-root-importのようなものがあります。

基本的には、プロジェクトのルートからという意味です。以下のようなものを書く必要がありません。import Component from '../../../../components/component'

編集：それが存在import Component from 'components/component'しない理由の1つは、それを行わずにnode_modulesフォルダを検索するためです

— ベン
ソース

2

私の答えを改善してくれて@ felix-klingに感謝します。それは「標準的ではない」よりもはるかに良い説明です:)

— Ben

84

それが古いことを知っていますが、それがどのように定義されているのか正確にはわかりませんでしたので、調べて来て、少し深く掘り下げて、最終的にこれをVue-CLI（Vue.js）で生成されたWebpack構成で見つけました

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': path.join(__dirname, '..', dir)
    }
},

したがって、この場合はプロジェクトのvue-cliで生成されたsrcディレクトリのルートを指すエイリアスです。

— カン・ラウ
ソース

このようなものを使用することは可能ですか？後'@*': ['client/src/*']の部分だけが取られているので、できるようになり、正しくアクセスしようとしますか？TS + VSCodeは、tsconfig.jsonのこの正確な形式ですでにそれを許可していますが、でwebpackエラーが発生します。私がそれをソリューションに変更すると、そのインポートパスがすぐに機能し始めるので、それ以外の場合はパスが正しくなります。 @import X from '@components/xclient/src/components/xCan't resolve '@components/x' in 'client/src/'import X from '@/components/x'

— Qwerty、

@Qwertyわからない、@ *がVSCodeに存在することを知らなかったので、どうしようもない

— Can Rau

29

ようにするにはベンの答えは、より包括的な：

まず、あなたが追加する必要がありbabel-plugin-root-import、あなたの中devDependenciesでpackage.json（使用している場合yarn：yarn add babel-plugin-root-import --dev）。次に.babelrc、次の行をpluginsキーに追加します。

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

これで、を使用できます@。例えば：

の代わりに

import xx from '../../utils/somefile'

あなたはできる

import xx from '@/utils/somefile'

— アリ・マスディアン
ソース

プラグインを依存関係に追加しましたが、.babelrcがありません。ルートでも作成しましたが、まだ機能しませんか？私はbabel.config.jsを持っています

— Kick Buttowski

8

上記のように、この機能はデフォルトではJSにありません。それを楽しむには、babelプラグインを使用する必要があります。そして、その仕事は簡単です。JSファイルのデフォルトのルートソースを指定でき、ファイルのインポートをそれにマッピングするのに役立ちます。いずれかのnpmからインストールを開始するには：

npm install babel-plugin-root-import --save-dev

または

yarn add babel-plugin-root-import --dev

.babelrcアプリのルートにを作成し、好みに合わせてこれらの設定を構成します。

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

上記の設定を使用すると、次のようにそのソースから簡単にインポートできます。

import Myfile from "@/Myfile"

このすべてのファンキーなことをせずに：

"/../../../Myfile"

シンボルが"~"ボートに浮かぶようなものに変更することもできます。

— ウェール
ソース

0

VSアプリを使用して、ネイティブアプリの反応をビルドしています。

必要なものは：

アプリのルートパスの下にjsconfig.jsonを作成します
jsconfig.jsonに、次のコードを追加します。

{"compilerOptions"：{"baseUrl"： "。"、 "target"： "ES6"、 "module"： "commonjs"、 "paths"：{"@ / "：["src / "]、 "@components / "：[" src / components / "]、" @ core / "：[" src / core / "]}}、" exclude "：[" node_modules "]}

基本的に「ショートカット」のように：["abs_path"]

— ダニエル・フア
ソース