質問編集履歴

1

回答内容を元に改めて試行した結果と、その結果に対する質問を追記

2016/11/19 04:47

投稿

philomagi
philomagi

スコア267

test CHANGED
@@ -1 +1 @@
1
- browserify-shim を使って、jQueryとClEditorをbrowserify + requireしたい
1
+ browserify を使って、jQueryとClEditorを単一ファイルにコンパイルおよびrequire可能にしたい
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
 
84
84
 
85
- package.jsonを上記の通り設定した状態で、現在以下のような問題がています。
85
+ ###現在ている問題
86
86
 
87
87
 
88
88
 
@@ -139,3 +139,97 @@
139
139
 
140
140
 
141
141
  以上、些細なことでもヒントや手がかりをいただければ幸いです。情報の不足が有れば追記いたしますので、ぜひご指摘ください。
142
+
143
+
144
+
145
+ ###追記 cleditorをrequireするとエラー
146
+
147
+ browserify-shimの用途を完全に誤解していたようなので、タイトルを変更すると共に、browserifyのみでの実施に切り替えました。
148
+
149
+
150
+
151
+ jQueryをビルド後のファイル(build.jsとします)に組み込むことは成功したのですが、cleditorの組み込みが上手くいきません。
152
+
153
+ 設定およびディレクトリ構成は以下の通りです。
154
+
155
+
156
+
157
+ ######package.json
158
+
159
+ ```json
160
+
161
+ {
162
+
163
+ "browserify": {
164
+
165
+ "transform": [
166
+
167
+ "babelify",
168
+
169
+ "vueify"
170
+
171
+ ]
172
+
173
+ },
174
+
175
+ "browser": {
176
+
177
+ "vue": "vue/dist/vue",
178
+
179
+ "cleditor": "./client/vendor/cleditor/jquery.cleditor.min.js"
180
+
181
+ },
182
+
183
+ }
184
+
185
+ ```
186
+
187
+ ```
188
+
189
+ /
190
+
191
+ - app/
192
+
193
+ - bin/
194
+
195
+ - client/ # クライアントサイドのjsファイルを配置しています
196
+
197
+ - app/
198
+
199
+ - main.js
200
+
201
+ - vendor/ # cleditor等、npmで公開されていない外部ライブラリ
202
+
203
+ - cleditor/
204
+
205
+ - jquery.cleditor.min.js
206
+
207
+ - jquery.cleditor.js
208
+
209
+ - jquery.cleditor.css
210
+
211
+ - public/
212
+
213
+ - app/
214
+
215
+ - build.js
216
+
217
+ - build.css
218
+
219
+ - 以下略
220
+
221
+ ...
222
+
223
+ - package.json
224
+
225
+ ```
226
+
227
+ また、main.js内で```window.jQuery = window.$ = require('jquery')```を実行し、グローバル空間に```$, jQuery```を展開しています。
228
+
229
+
230
+
231
+ この状態でbrowserifyを実行すると、jQueryは正常にbuild.js内に組み込まれ、cleditorもまた、 build.js内に含まれているようです。
232
+
233
+
234
+
235
+ しかし、実際に画面を表示しようとすると、先述した「現在発生している問題」の4.が発生してしまい、jsが正常に実行されません。