如何使用 grunt、browserify 和 babelify 启用源映射答案

【问题标题】：How to enable sourcemaps with grunt, browserify, and babelify如何使用 grunt、browserify 和 babelify 启用源映射
【发布时间】：2015-06-23 20:17:19
【问题描述】：

我想为使用 babelify 和 browserify 转译的 jsx 文件生成源映射。似乎在我的输出文件底部生成了一些源映射作为 base64 编码的注释，但堆栈跟踪不支持它们。

我的 grunt 任务如下所示：

browserify: {
  options: {
    browserifyOptions: {
      debug: true
    },
    debug: true,
    transform: ['babelify']
  },
  app: {
    src: 'src/app.jsx',
    dest: 'dist/app.js'
  }
},

【问题讨论】：

标签： browserify grunt-browserify

【解决方案1】：

这对我有用：

browserify: {
    dev: {
        options: {
            browserifyOptions: {
                debug: true
            },
            transform: [["babelify"]]
        },
        files: {
            "dist/bundle.js": "src/index.js"
        }
    }
},

【讨论】：

【解决方案2】：

需要使用grunt-exorcise 从包中提取地图。

Browserify recommends it

browserify: {
  options: {
    browserifyOptions: {
      debug: true
    },
    debug: true,
    transform: ['babelify']
  },
  app: {
    src: 'src/app.jsx',
    dest: 'dist/app.js'
  }
},
exorcise: {
    app: {
       options: {},
       files: {
          'dist/app.js.map':['dist/app.js'],
       }
    }
},

【讨论】：