typescript import {} の意味、jqueryはどのようにimportされているのか

Question

https://teratail.com/questions/130729

↑昨日、vue単一ファイルコンポーネントでjqueryが使えず質問しました

原因は

import { $ } from "jquery"

という書き方で、正しくは

import $ from "jquery" か、
import jQuery from "jquery"

と書くべきだったみたいです

しかし、
import { Component, Vue } from 'vue-property-decorator'
このようにimportしている箇所もあります

node_modulesでjquery.jsとvue-property-decorator.jsをみてみました

vue-property-decorator.jsの方では、

たくさんの関数が 'export function "関数名" () {}'といった形で宣言されてました

import { Component, Vue } from 'vue-property-decorator'
はモジュールの中で{}内の特定の関数をimportするみたいな感じでしょうか

jquery.jsは、冒頭部分のみですが、

/*!
 * jQuery JavaScript Library v3.3.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *
 * Copyright JS Foundation and other contributors
 * Released under the MIT license
 * https://jquery.org/license
 *
 * Date: 2018-01-20T17:24Z
 */
( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

...............

このようになってました

jqueryはどういった仕組みでimportされているのでしょうか

Answer 1

このjQueryのエクスポート法は、CommonJSと呼ばれるやり方で、jQueryオブジェクト全体をmodule.exportsに代入することで出力しています。

多くのES6環境では、CommonJSのインポートにも対応していますが、

• import name from 'library'…module.exportsに代入されたもの全体をnameに代入する
• import {name} from 'library'…module.exports.nameをnameとして取り出す

ような挙動になります。

---

なお、jQueryとVue.jsの併用は、特にjQueryでDOM操作をする場合についてはあまり適当でありません。逆に、「DOM操作以外しか使わない」のであれば、jQueryは大きすぎますので、別なライブラリを使うことを考えたほうがいいでしょう。

Comments

[退会済みユーザー]

回答ありがとうございます

なるほどです
前者はimportする対象が唯一のもので、それを name という変数に格納する形で、
後者は、importする対象を特定し、as name　などで特定の変数名に格納することなどもできるけど、as name をしない場合は、元々の名前で自動的に扱えるといった感じでしょうか

後者の考え方に沿って

import $ from 'jquery'

ではなくて

import 'jquery'

とだけ書いて、jquery()

という風に使えるのかなと思ったのですが、こっちは自動的にその名前で扱える訳ではないのですね...

vueとの併用について
そうですね、データバインディングが崩れる可能性があるからでしょうか