javascript - transpilador - transpilar

Mapas de fuentes externas para código ES6 minilado y transpilado con paquete web y trago

Question

Escribo el código ES6 y lo transfiero a ES5 con Babel, luego minimizo con Uglify. Todos funcionan con webpack a través de gulp. Me gustaría usar mapas de fuentes externas (para mantener el tamaño del archivo lo más pequeño posible).

La tarea del trago es bastante básica, todo lo funky está en la configuración del paquete web:

var gulp = require("gulp");
var webpack = require("gulp-webpack");

gulp.task("js:es6", function  () {
  return gulp.src(path.join(__dirname, "PTH", "TO", "SRC", "index.js"))
  .pipe(webpack(require("./webpack.config.js")))
  .pipe(gulp.dest(path.join(__dirname, "PTH", "TO", "DEST")));
});

webpack.config.js:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  output: {
    filename: "main.js",
    sourceMapFilename: "main.js.map"
  },
  devtool: "#inline-source-map",
  module: {
    loaders: [
        { test: path.join(__dirname, "PTH", "TO", "SRC"),
          loader: "babel-loader" }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false,
        semicolons: true
      },
      sourceMap: true
    })
  ]
};

Lo anterior funciona y crea mapas fuente de trabajo, pero están en línea.

Si cambio webpack.config.js para que diga devtool: "#source-map" , el mapa fuente se crea como un archivo separado (usando sourceMapFilename como nombre de archivo). Pero no es útil: las herramientas de desarrollo de Chrome no parecen entenderlo. Si webpack.optimize.UglifyJsPlugin el webpack.optimize.UglifyJsPlugin el mapa fuente se puede usar, pero el código no se ha modificado. Así que el mapa fuente funciona para los dos pasos individuales, pero no cuando se ejecutan en secuencia.

Sospecho que el paso de uglify ignora el mapa de origen externo del paso anterior del transpiler, por lo que el mapa de origen que genera se basa en la secuencia, que por supuesto no existe fuera de gulp. De ahí el mapa fuente inutilizable.

Soy bastante nuevo en el paquete web, así que me puede estar perdiendo algo obvio.

Lo que trato de hacer es similar a esta pregunta, pero con el paquete web en lugar de browserify: Gulp + browserify + 6to5 + mapas fuente

Gracias por adelantado.

Answer 1

Recomiendo encarecidamente poner la configuración de su paquete web en el archivo gulpfile, o al menos hacer que funcione. Esto tiene algunos beneficios agradables, como poder reutilizarlo para diferentes tareas, pero con diferentes opciones.

También recomiendo usar el paquete web directamente en lugar de usar gulp-webpack (especialmente si es lo único que está procesando). Esto dará resultados mucho más predecibles, en mi experiencia. Con la siguiente configuración, los mapas de origen funcionan bien incluso cuando UglifyJS se usa:

"use strict";

var path = require("path");
var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");

function buildJs (options, callback) {
    var plugins = options.minify ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },

            output: {
                comments: false,
                semicolons: true,
            },
        }),
    ] : [];

    webpack({
        entry: path.join(__dirname, "src", "index.js"),
        bail: !options.watch,
        watch: options.watch,
        devtool: "source-map",
        plugins: plugins,
        output: {
            path: path.join(__dirname, "dist"),
            filename: "index.js",
        },
        module: {
            loaders: [{
                loader: "babel-loader",
                test: //.js$/,
                include: [
                    path.join(__dirname, "src"),
                ],
            }],
        },
    }, function (error, stats) {
        if ( error ) {
            var pluginError = new gutil.PluginError("webpack", error);

            if ( callback ) {
                callback(pluginError);
            } else {
                gutil.log("[webpack]", pluginError);
            }

            return;
        }

        gutil.log("[webpack]", stats.toString());
        if (callback) { callback(); }
    });
}

gulp.task("js:es6", function (callback) {
    buildJs({ watch: false, minify: false }, callback);
});

gulp.task("js:es6:minify", function (callback) {
    buildJs({ watch: false, minify: true }, callback);
});

gulp.task("watch", function () {
    buildJs({ watch: true, minify: false });
});

Answer 2

Yo recomendaría usar devtool de devtool: ''source-map''

Aquí hay un ejemplo de webpack.config con la asignación de origen a continuación:

var path = require(''path'');
var webpack = require(''webpack'');

module.exports = {
  devtool: ''source-map'',
  entry: [''./index''],
  output: {
    filename: ''bundle.js'',
    path: path.join(__dirname, ''public''),
    publicPath: ''/public/''
  },
  module: {
    loaders: [
      { test: //.js$/, loader: ''babel-loader'', exclude: /node_modules/ }
    ]
  },
  plugins: [
  ]

};