web-dev-qa-db-ja.com

名前なしのJavaScript ES6インポート

Webpack、Babel、Vue.jsを実行していますが、エントリファイルを分割したいと思います。現在、アプリケーションの開始点であるapp.jsファイルがあります。

私はbootstrap.jsファイルに入れたいコードの一部を持っています。これをメインのapp.jsファイルに含めたいのですが、Vueにして、コンポーネントを追加します。

私がbootstrap.jsファイルに入れたいものの例：

import messagesNL from './translations/nl';

Vue.use(VeeValidate, {
  locale: 'nl',
  dictionary: {
    nl: {
      messages: messagesNL
    }
  }
});

window.Vue = Vue;

プラグインやグローバル構成などの設定はかなり多いです。これはあなたの典型的なモジュールではないようで、このファイルの構造のようなモジュールを作成するのは難しいので、基本的にはapp.jsファイルで使用します。

import bootstrap from './bootstrap';

これが機能するかどうかわからないので、module exports {}のような構文を実行しなくても、すべてがきちんとインポートされるようです。

ここで、bootstrapファイルに割り当てた変数はapp.jsでは使用されません。これは、ファイルとmy IDEグレー未使用であることを知らせるために表示されます。

これに別の構文があるので、名前を割り当てる必要はありませんか？このアプローチは私のファイルを分割するのに大丈夫ですか、それとも私は何か他のことをするべきですか？

まだ適切なモジュールには入れていません。それはそれが独自のローカルスコープを持ち、すべてのプラグインなどでVueを設定する方法がわからないためです。より良い提案を私は開いています。

乾杯。

javascriptnode.jswebpackecmascript-6vue.js
17
Stephan-v

何もインポートせずにファイルを含めるには、<name> fromステートメントの一部：

import './bootstrap';

これにより、アクティブなモジュールのスコープに影響を与えることなくターゲットモジュールが実行されますが、グローバルの宣言や既存のグローバルの変更などの副作用が生じる可能性があります。

MDNのドキュメントに記載されているように モジュールをその副作用のみでインポートする ：

何もインポートせずに、副作用のみのモジュール全体をインポートします。これはモジュールのグローバルコードを実行しますが、実際には値をインポートしません。

import '/modules/my-module.js';
37
sdgluck