Javascript: How To Create Es5 Lib With Es6

I'm working with GoogleAppsScript. I'm trying to have my code locally in order to: - use github - write ES6 I'm using webpack, and generating a bundle that will run in a html page

Solution 1:

The solution was to use webpack expose-loader and to move the import/require of the different files to the main.

---

Here is an example of setup:

package.json:

{"name":"appName","version":"0.0.0","description":"Code for a google sheet project","scripts":{"watch":"npm install && webpack --watch"},"devDependencies":{"babel-core":"*","babel-loader":"*","node-libs-browser":"*","webpack":"*","expose-loader":"*"}}

webpack.config.js:

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

module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + '/out',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: path.join(__dirname, 'src'), loader: 'babel-loader'}
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        colors: true
    }
};

main.js:

require("expose?Test!./Test.js");

// note here that this line replace//    `import {SpreadSheetLogger} from 'SpreadSheetLogger.js'`//    in test.jsrequire("expose?SpreadSheetLogger!./SpreadSheetLogger.js");

test.js:

// import {SpreadSheetLogger} from 'SpreadSheetLogger.js' is not needed//   as the import is done in the main.jsexportdefaultclassTest {
    runAllTests() {
        this.test_logger()
    }

    test_logger() {
        var log = newSpreadSheetLogger()
        log.info("This is an info")
    }
}

SpreadSheetLogger.js:

exportdefaultclassSpreadSheetLogger {
    constructor() {
        this.loggerSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ImportLog");
    }

    info(data) {
     Logger.log(data);
     this.loggerSheet.appendRow([newDate(), "INFO", data]);
    }
}