私は大きなWebアプリケーションに取り組んでいます。私は Gulp を使用して JavaScript ファイルと Browserify をビルドしています。
問題は、私が開発モードにいるとき、変更を加えるたびに (watch を使用して) JavaScript バンドルを再構築するのに非常に時間がかかることです。
私のアプリケーションでは、すべての JavaScript ファイルを特別な順序で 1 つのファイルにパッケージ化する必要があります。
- すべてのベンダー ファイル (ブートストラップ jquery などを含む)
- ブラウザ化する必要があるいくつかのファイル (commonJS スタイルを使用
require('...');) - ブラウザ化とバベル化が必要ないくつかのファイル (
.jsxファイル)
browserify がすべてのファイルをバンドルするのを待ってファイルを保存する間に時間を無駄にしたくないので (平均 20 ～ 25 秒...)、非同期に構築された 3 つのバンドルでフローを分割し、その 3 つの一時的なバンドルすべてをマージすることにしました。 1つに。(この方法では、最初のビルドに 15 秒しかかからず、watchify でファイルに 1 つの変更を加えると、再ビルドに 20 秒ではなく 2 秒しかかかりません)。
私の問題は、最終ファイルをバンドルするために 1 つのパイプのみを使用し、browserify とdebug: trueオプションを使用していたとき、生成された sourcemap ファイルが 1 つしかなかったため、browserify デバッグ オプションのおかげで、chrome 開発者コンソールですべてのソース ファイルに個別にアクセスできたことです。 .
しかし、今では 3 つのパイプがあり、各パイプが独自のソースマップを作成し、gulp-sourcemaps
プラグインとloadMaps: trueオプションを使用して最後の 3 つの一時バンドルをマージすると、Web ブラウザー コンソールでエラーが発生しました (そのため、アプリは動作しません)。debug: trueまた、browserify オプションをオフにすると、正しく動作しますが、各 JS ファイルの分離をデバッグできません。大きな10万行の最終ファイルしかありません...
誰かが正しいソースマップを持っているのを手伝ってくれませんか?
ここにスローされるエラーの種類があります
if (file.isNull() || file.sourceMap) {
^
TypeError: Object (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({
has no method 'isNull'
at DestroyableTransform.sourceMapInit [as _transform] (/space/iadvize.com/Deploy/releases/20151230085529/desk/node_modules/gulp-sourcemaps/index.js:20:14)
このエラーのため、すべての browserify バンドルによって生成されたソースマップをマージできません。