browserify - grunt、browserify、babelify でソースマップを有効にする方法

Question

babelify と browserify でトランスパイルされた jsx ファイルのソースマップを生成したいと思います。出力ファイルの下部に base64 でエンコードされたコメントとしていくつかのソースマップが生成されているようですが、スタックトレースはそれらを尊重しません。

私の単調なタスクは次のようになります。

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

Answer 1

バンドルからマップを抽出するには、grunt-exorciseを使用する必要があります。

Browserifyはそれをお勧めします

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'],
       }
    }
},