packaging with grunt-browserify

Question

I'm trying to make use of ES6 modules syntax, and thus package several JS files (which contain import and export statements) into one browser-readable file.

I get no errors, so why are my 2 source files here, not compiled into my one destination file? What attribute am I missing in this pipeline? Thanks

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        browserify: {
            development: {
                src: [
                    "src/js/test_file_one.js",
                    "src/js/test_file_two.js"
                ],
                dest: 'assets/js/es6_script.min.js',
                options: {
                    browserifyOptions: { debug: true },
                    presets: ['@babel/preset-env']
                }
            }
        },
        watch: {
            js: {
                files: "src/js/*.js",
                tasks: "browserify"
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browserify');
    grunt.registerTask('default', ['watch']);
    grunt.registerTask('build', 'grunt-browserify');
};

Refer to my answer [here](https://stackoverflow.com/questions/41067220/using-babel-grunt-to-work-with-es6-how-to-transform-require-statements/41100748#41100748) - you need to also utilize [babelify](https://www.npmjs.com/package/babelify). — RobC, Mar 10 '20 at 14:19

score 0 · Answer 1 · edited Mar 11 '20 at 13:16

This gets quirky when NOT using the original babel and babel preset, which most answers out there tend to reference. I needed to run a browserify TRANSFORM:

browserify: {
    dist: {
        src: [
            "src/js/toasts.js",
            "src/js/test.js"
        ],
        dest: 'assets/js/es6_script.min.js',
        options: {
            browserifyOptions: { debug: true },
            transform: [['babelify', { presets: ["@babel/preset-env"] }]],
        }
    }
}

packaging with grunt-browserify

1 Answers1