🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

2回答

5795閲覧

【es6】import される順番を制御したい

kinmugi87

総合スコア12

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/06/04 07:39

編集2016/06/04 11:05

AngularJS (v1.5.6) とes6をでサービスを制作している者です。

angular-ui-sortable というライブラリを使って要素をドラッグで並び替えるUIを作成しているのですが、このライブラリがjQueryとjQueryUIに依存しているため、仕方なくそれらを使おうと思っています。

以下の様なコードを書いたところ、 ui.sortable: jQuery should be included before AngularJS! というエラーが出てうまく動きませんでした。

lang

1'use strict'; 2 3import 'jquery'; 4import 'jquery-ui'; 5import angular from 'angular'; 6import 'angular-ui-sortable'; 7 8class MainController { 9 10 constructor() { 11 this.items = [ 12 { name: 'aaa', age: 15 }, 13 { name: 'bbb', age: 16 }, 14 { name: 'ccc', age: 17 } 15 ]; 16 } 17} 18 19angular.module('app', ['ui.sortable']) 20 .controller('MainController', MainController);

lang

1<html ng-app="app"> 2 <head> 3 <title>Test</title> 4 </head> 5 <body ng-controller="MainController as main"> 6 <div ui-sortable ng-model="main.items"> 7 <div ng-repeat="item in main.items"> 8 <p>{{ item.name }}</p> 9 <p>{{ item.age }}</p> 10 </div> 11 </div> 12 <script src="bundle.js"></script> 13 </body> 14</html>

エラーメッセージの内容から、importされる順番に問題があるのかと思い、上記のコードをトランスパイルした際にできるファイルを見てみると、なぜかjQueryではなくAngularJSのコードが最初に記載されていました。

なぜそのような順番でトランスパイルされるのか、またその順番を制御する方法があるのか、ご存知の方がいらっしゃいましたらご回答をよろしくお願いします。

※トランスパイルはBrowserifyとbabelifyを使っています
※jQueryとjQueryUIを script タグを使って bundle.js の前に読み込めば問題なく動作します

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

window.jQueryを登録してからrequire('angular')してください。

javascript

1'use strict'; 2 3import angular from './angular'; 4 5class MainController { 6 7 constructor() { 8 this.items = [ 9 { name: 'aaa', age: 15 }, 10 { name: 'bbb', age: 16 }, 11 { name: 'ccc', age: 17 }, 12 ]; 13 } 14} 15 16angular.module('app', ['ui.sortable']) 17 .controller('MainController', MainController);

angular.js

javascript

1import jquery from 'jquery'; 2import 'jquery-ui'; 3 4window.jQuery = jquery; 5 6require('angular'); 7require('angular-ui-sortable'); 8 9export default window.angular;

以下のpackage.jsonで動作を確認しました。

json

1{ 2 "scripts": { 3 "build": "browserify index.js -t babelify > bundle.js" 4 }, 5 "babel": { 6 "presets": [ 7 "es2015", 8 "stage-1" 9 ] 10 }, 11 "devDependencies": { 12 "babel-cli": "^6.6.5", 13 "babel-preset-es2015": "^6.6.0", 14 "babel-preset-stage-1": "^6.5.0", 15 "babelify": "^7.3.0", 16 "browserify": "^13.0.1" 17 }, 18 "dependencies": { 19 "angular": "^1.5.6", 20 "angular-ui-sortable": "^0.14.1", 21 "jquery": "^2.2.4", 22 "jquery-ui": "^1.10.5" 23 } 24}

実行例

投稿2016/06/06 04:09

horse_n_deer

総合スコア454

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinmugi87

2016/06/06 08:22

動作しました! 非常に丁寧にご回答いただき、ありがとうございます。 投稿いただいたコードを参考にいろいろと試してみた結果、以下を疑問に思いました。 --- index.js --- import './jquery-loader'; import angular from 'angular'; import 'angular-ui-sortable'; class MainController { ... } angular.module('app', ['ui.sortable']) .controller('MainController', MainController); --- /index.js --- --- jquery-loader.js --- import jQuery from 'jquery'; import 'jquery-ui'; window.jQuery = jQuery; --- /jquery-loader.js --- 上記のようなコードであれば正常に動くのに、jquery-loader.js の内容を index.js の最上部に書くと動きませんでした。 重ねての質問で申し訳ありませんが、同じファイル内で読み込んだ場合にはなぜ動作しないのでしょうか。
horse_n_deer

2016/06/06 09:51 編集

「`import文`はbabelでトランスパイルすると、常に最上部に移動する。」…というのを以前qiitaで見た気がします(出典先を忘れました、すみません)。ので、上記のような書き方をしました。じっさい「const, require, import」の順で書いても、importが最上部に移動し、トランスパイル結果は「require, var, require」になります。
kinmugi87

2016/06/11 14:52

そうなんですね! その仕様は全く知りませんでした! ありがとうございました!
guest

0

私は使ったことがありませんが、Browserifyはまさにその依存関係を制御するためのものではないのでしょうか?
一番単純なのはangular.jsでjQueryをrequireする事だと思いますが、スマートではありませんね・・・jsの依存関係を定義ファイルに記述する方法があるのかもしれません。

投稿2016/06/05 12:22

munyagu

総合スコア479

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinmugi87

2016/06/05 12:35

まさに仰る通りで、そのためにBrowserifyを使ってるはずなんですけどね^^; > jsの依存関係を定義ファイルに記述する方法があるのかもしれません。 このあたりも疑ってググってみたんですが、なかなかそれらしいものを見つけられず。。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問