Question

我正在编写ES6 JavaScript模块并使用Babel将它们转换为ES5。 Babel生成指向原始ES6代码的源图。然后我使用r.js来获取那些ES5 AMD模块并将它们组合起来并进行uglify。 r.js创建一个显示ES5文件的源图。我从第一步就想要ES6。我的grunt文件看起来像这样：

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  // Project configuration.
  grunt.initConfig({
    babel: {
      options: {
        modules: "amd",
        sourceMap: true
      },
      dist: {
        files: {
          "es5/editor.js": "src/editor.js",
          "es5/editor-events.js": "src/editor-events.js"
        }
      }
    },
    requirejs: {
      production: {
        options: {
          baseUrl: "es5",
          mainConfigFile: "es5/require.config.js",
          name: "../node_modules/almond/almond",
          include: ["editor"],
          out: "dist/ed.js",
          optimize: "uglify2",
          generateSourceMaps: true,
          preserveLicenseComments: false
        }
      }
    }
  });

  // Default task(s).
  grunt.registerTask('default', ['babel', 'requirejs']);

};

它完美地编译了一切。但它失去了漂亮的ES6源图。有什么办法保留它们吗？是否有更好的构建过程可以让我使用一个浏览器友好的JavaScript文件？

Answer 1

您不应该使用两个不同的步骤来构建您的应用。一个用于转换，另一个用于捆绑。你应该迈出一步。

您可以使用browserify捆绑它们，并babelify作为转换器。命令看起来像这样：

browserify app.js -t babelify -d -o bundle.js

注意：-d（调试）将启用源图。他们会指向es6文件。

如何保留从Babel转换为r.js uglifying的源图？

1 个答案: