3

我正在开发一个大型 Web 应用程序。我正在使用 Gulp 构建 javascript 文件和 Browserify。

问题是当我处于开发模式时，每次我进行更改时都需要花费大量时间来重建我的 javascript 包（使用手表）

对于我的应用程序，我需要以特殊顺序将所有 javascript 文件打包到一个文件中：

  • 所有供应商文件（包括引导 jquery 等）
  • 一些需要浏览器化的文件（使用 commonJS 样式 require('...');）
  • 一些需要浏览器化和 babelified 的文件（.jsx文件）

由于我不想在文件保存之间浪费时间等待 browserify 捆绑所有文件（平均 20-25 秒......），我决定将流程拆分为 3 个异步构建的捆绑包，然后合并所有这 3 个临时捆绑包到一个。（通过这种方式，第一次构建只需要 15 秒，如果我使用 watchify 在文件中进行了一次更改，重建只需 2 秒而不是 20 秒）。

我的问题是，当我只使用一个管道来捆绑最终文件时，使用 browserify 和debug: true选项，我可以在 chrome 开发者控制台中单独访问所有源文件，这要归功于 browserify 调试选项，因为只有一个 sourcemap 文件生成.

但是现在有了 3 个管道，每个管道都构建了自己的源映射，当我将 3 个临时包合并到最后一个中时，使用gulp-sourcemaps 插件和loadMaps: true选项，Web 浏览器控制台上出现错误（因此该应用程序不起作用）。如果我关闭debug: truebrowserify 选项，它可以正常工作，但我无法单独调试每个 JS 文件。我只有大的 100K 行最终文件...

有人可以帮我获得正确的源图吗？

这是抛出的错误类型

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 包生成的源图。

4

0 回答 0