質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

3020閲覧

JSライブラリ開発で、配布用の単一.jsファイルを作るのにWebPackは向いているか?

EMADURANDAL

総合スコア41

JavaScript

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

0グッド

1クリップ

投稿2015/06/25 06:15

お世話になります。
JSライブラリ(WebGL系なので、ブラウザ用ライブラリです)を初めて開発しようとしています。
そこで、ソースとなる複数の.jsライブラリを、配布用の単一の.jsファイルにする方法について質問させてください。

ライブラリプロジェクトフォルダのsrc/以下に書いた個々の.jsファイルをbuild/以下に、配布用の一つのjsファイルにまとめる場合って、webpack使っても大丈夫でしょうか?
私の知人のライブラリ開発者はgrunt-contrib-concatを使われているようなのですが、それをみているとどうも単純に各ソースを結合しているだけのようでした。
一方、私がwebpackを使ってやってみたところ、どうも…

/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) {

というwebpack独自のコードが入ってしまうようで、この状態で配布用.jsファイルとしてしまって良いものかどうか…というのがわからないでいます。
WebPackを配布用.jsファイルの結合ツールとして使うケースってそもそもありますでしょうか?
むしろこうした方が良い、という情報などあればご教示いただきたいです。

どうぞ、よろしくお願いいたします。

(参考情報として、gulp用のwebpack設定を以下に書きます)

// webpackの設定 webpack: { entry: src + '/js/mylib.js', output: { filename: 'mylib.js' }, resolve: { extensions: ['', '.js'] }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=selfContained' } ] } },

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

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

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

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

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

guest

回答2

0

grunt-contrib-concatで
http://niwaringo.tumblr.com/post/42918032996/grunt-cli-grunt-contrib-concat

こんな形でintro.jsとoutro.jsを用意されてはいかがでしょうか?

投稿2015/06/25 07:50

nanndemoiikara

総合スコア775

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

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

EMADURANDAL

2015/06/25 23:12

ご助言ありがとうございます! なるほど、こういうやり方があるのですね。 私が使っているのはgulpなんですが、おそらく同様の事ができそうですね。ありがとうございます。 ただ、このやり方が主流なのかどうかは私には判断が付きません。 もし他の方で、「こういうやり方もあるんだよ」という方がいたらご教示いただきたいです!
guest

0

自己解決

いろいろ試したのですが、WebPackよりも良いツールを見つけたので、現在はそちらに移行しました。
それは、「rollup.js」というものです。

ES6 moduleを使う場合に特化したツールなのですが、WebPackのように元ソースのクラス名・関数名を変に置き換えたりしないし、ビルド後のソースのサイズがWebPack使用時の2/3以下に削減されるなど、良いことづくめでした。

ということで、「rollup.jsを使う」という方向性で自己解決とさせていただきます。
とはいえ、いずれにしましても、一つの有効なソリューションをご提示くださったnanndemoiikara様には感謝申し上げます。ありがとうございました。

投稿2015/11/27 04:39

EMADURANDAL

総合スコア41

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問