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

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 の前に読み込めば問題なく動作します

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

行動規範の内容に同意します