0

I am primarily a backend developer but Im trying to modernise my javascript capabilities.

I have written a test file in Es6 as follows:

export const TestA = () => {
    console.log("test A");
}

export const TestB = () => {
    console.log("test B");
}

So, I want to set it so that I Can import TestA and TestB into scripts as necessary like so:

import { TestA } from '../../includes/Sample.js';

$(function() {
    TestA();
});

So to my mind the second script should import TestA and ignore TestB once I run it through a transcripter such as like this in gulp:

return browserify({
            entries: [path.join(pathToCompileFoler, file)]
        })
        .transform(babelify.configure({
            presets: ['es2015'],
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function(err) { console.log("Error : " + err.message); })
        .pipe(source(file))
        .pipe(gulp.dest(path.join(pathOutput, "/")));

However, when I look at what is produced by this transcription I see that both TestA and TestB have been written to my newly transcribed file:

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
var TestA = exports.TestA = function TestA() {
    console.log("test A");
};

var TestB = exports.TestB = function TestB() {
    console.log("test B");
};

},{}],2:[function(require,module,exports){
'use strict';

var _Sample = require('../../includes/Sample.js');

$(function () {
    (0, _Sample.TestA)();
});

},{"../../includes/Sample.js":1}]},{},[2]);

To my mind one of the benefits of es6 is tree-shaking (taking only the bits that I need)

Am I missing something here, or is this expected behaviour?

Kevin Bradshaw
  • 6,327
  • 13
  • 55
  • 78
  • Are you building it with webpack? If so - tree shaking is not enabled by default - more details on configuring it [here](https://webpack.js.org/guides/tree-shaking/) – Andrey Jan 30 '19 at 11:25
  • I am not doing any additional steps other than I minify the above code and use the file in my browser, is this not good practice? – Kevin Bradshaw Jan 30 '19 at 11:27
  • 1
    Ah, sorry, browserify also doesn't perform tree shake by default. It looks like there's specific plugin for it : https://github.com/browserify/common-shakeify – Andrey Jan 30 '19 at 11:28
  • Ok, thats more like what I expected. thank you. IF you wish to add an answer I will accept as it has solved the problem – Kevin Bradshaw Jan 30 '19 at 11:36
  • 1
    The module file is still passed around as a whole and parsed completely, there is no protocol to take parts from it. If you want to do tree-shaking while bundling, you need to explicitly command your tool to do it. ES6 doesn't guarantee anything like this. – Bergi Jan 30 '19 at 13:49

0 Answers0