web-dev-qa-db-ja.com

ルートからのES6インポート

現在、React Native。

--app/
    -- /components
        -- Loading.js
    -- index.ios.js

今、私のindex.ios.js私は簡単にできる：

import Loading from './components/Loading';

ただし、ディレクトリ構造を深くすると、より多くのコンポーネントを作成し始めると、面倒になり始めます。

import Loading from '.../../../../components/Loading';

私は、好ましい解決策は物事のためにプライベートなnpmモジュールを作ることだと理解していますが、それは小さなプロジェクトにとってはやり過ぎです。

global.requireRootブラウザでソリューションを入力しますが、インポートでこれを実装するにはどうすればよいですか？

javascriptnode.jsimport
34
Alias

Reactでも同じ問題がありました。そこで、ルートの観点からモジュールをインポートできるようにするbabelのプラグインをいくつか作成しました-パスは短くありませんが、インポートするものは明確です。

代わりに：

import 'foo' from '../../../components/foo.js';

次を使用できます。

import 'foo' from '~/components/foo.js';

ここにプラグインがあります（テスト済みで明確なREADMEを使用）

37
Michael J. Zoidl

Webpackを使用している場合は、resolveプロパティを使用して設定し、インポートパスを解決できます。

Webpack 1

resolve: {
  root: [
    path.resolve(__dirname  + '/src')
  ]
}......

Webpack 2

resolve: {
  modules: [
    path.resolve(__dirname + '/src'),
    path.resolve(__dirname + '/node_modules')
  ]
}.....

その後、使用できます

import configureStore from "store/configureStore";

代わりに：

import configureStore from "../../store/configureStore";

Webpackは、渡された解決パラメーターからインポートパスを構成します。

System.jsローダーで実行できるものと同じですが、独自の構成パラメーターを使用できます（mapまたは path。System.jsのドキュメントで確認してください）（使用したい場合。主にAngular 2の場合です。 ng2を使用している場合でも、標準のSystem.jsを使用しないでください。Webpackの方がはるかに優れています。

11
Velidan

Webpackでは、設定が少し異なります：

import webpack from 'webpack';
import {resolve} from 'path';

...

module: {
    loaders: [
        {
            test: /\.js$/,
            use: ["babel-loader"]
        },
        {
            test: /\.scss$|\.css$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
    ]
},
resolve: {
    extensions: [".js"],
    alias: {
        ["~"]: resolve(__dirname, "src")
    }
},
6
keemor

Webpackでは、たとえば~で始まるパスをルートに解決することもできるため、import Loading from '~/components/Loading';を使用できます。

resolve: {
  extensions: ['.js'],
  modules: [
    'node_modules', 
    path.resolve(__dirname + '/app')
  ],
  alias: {
    ['~']: path.resolve(__dirname + '/app')
  }
}

トリックは、javascriptブラケット構文を使用してプロパティを割り当てることです。

6
Alexander Derck

Create-React-App を使用している場合は、環境変数 NODE_PATH を変更してプロジェクトのルートを含めるだけです。

Config.jsonで次の変更を行って、react-scriptsコマンドを実行する前にこの変数を設定します。

"scripts": {
  "start": "cross-env NODE_PATH=. react-scripts start",
  "build": "cross-env NODE_PATH=. react-scripts build",
  "test": "cross-env NODE_PATH=. react-scripts test",
  "eject": "react-scripts eject"
},

UNIXおよびWindowsで動作するため、npmライブラリ cross-env を使用しています。構文はcross-env var=value commandです。

import module from '../../my/module'の代わりにimport module from 'src/my/module'を実行できます

実装の追加詳細

Cross-envのスコープは実行するコマンドに限定されるため、cross-env var=val command1 && command2にはcommand1の間だけvarが設定されることに注意してください。必要に応じてcross-env var=val command1 && cross-env var=val command2を実行して修正してください

create-react-appは、node_modules /のフォルダーをNODE_PATHのwhatsより優先します。これが、NODE_PATHを「。」に設定している理由です。 「./src」の代わりに。 「。」を使用する「src /」で始まるすべての絶対インポートが必要です。つまり、srcというnode_moduleを使用している場合を除き、名前の競合は発生しません。

（注意事項：上記のソリューションはreplaces変数NODE_PATH。理想的には、既に存在する場合は追加します。NODE_PATHは「：」または「;」で区切られたリストです。 UNIXまたはWindowsに応じて、パス。これを行うためのクロスプラットフォームソリューションを見つけた場合は、回答を編集できます。）

6
Scotty Jamison

React 6か月以上前のプロジェクトをチェックアウトしましたが、何らかの理由でインポートが機能しなくなりました。最初の答えを試しました。

import 'foo' from '~/components/foo.js';

残念ながら、これは機能しませんでした。

.envと同じレベルで、プロジェクトのルートにpackage.jsonファイルを追加しました。そのファイルに次の行を追加すると、プロジェクトのインポートが修正されました。

NODE_PATH=src/
3
Fasani

Create React Appを使用している場合は、paths.appSrcからresolve.modules in config/webpack.config.dev.jsおよびconfig/webpack.config.prod.js。

から：

resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(...

に：

resolve: {
    modules: [paths.appSrc, 'node_modules', paths.appNodeModules].concat(...

これでコードが機能します：

import Loading from 'components/Loading';
1
Craig Myles