Utilizzo di ESP transpiled in Google Apps Script => ReferenceError: "SomeClass" non è definito

Question

Sto provando a utilizzare ES6 in un foglio di lavoro Google (nella parte script.google.com). Sono abbastanza nuovo per Javascript e forse l'errore è banale ...

---

• 28/09: L'errore per il posto come è cambiato come mi è stato solo utilizzando un nome di libreria di Google Apps Script (Logger), Passo a SomeClass. Sto cercando di modulo come la mia dichiarazione non è quello buono

---

Quello che ho fatto:

• creato un progetto webpack
• creato una classe Logger
• Creato un main.js dove importare la classe Logger
• WebPack genera un pacchetto dal mio main.js
• copio/incollare i bundle.js in un file fagotto sulle script.google
• tenta di eseguire un test in script.google ma ho ottenuto ReferenceError: SomeClass non è define.`

Ecco il mio codice:

SomeClass.js

export default class SomeClass { 
    constructor() { 
     this.loggerSheet = SpreadsheetApp.getActiveSpreadsheet() 
            .getSheetByName("ImportLog"); 
    } 

    LogInfo(data) { 
     Logger.log(data); 
     loggerSheet.appendRow([new Date(), "INFO", data]); 
    } 
} 

main.js

import SomeClass from './SomeClass.js'; 

test in script.google

function test_bundle() { 
    var someClass = new SomeClass(); //<== breaks here 
} 

Bundle.js => copia/incolla per script.google

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 

/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 

/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) 
/******/   return installedModules[moduleId].exports; 

/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   exports: {}, 
/******/   id: moduleId, 
/******/   loaded: false 
/******/  }; 

/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

/******/  // Flag the module as loaded 
/******/  module.loaded = true; 

/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 


/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 

/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 

/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 

/******/ // Load entry module and return exports 
/******/ return __webpack_require__(0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    'use strict'; 

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 

    var _SomeClassJs = __webpack_require__(4); 

    var _SomeClassJs2 = _interopRequireDefault(_SomeClassJs); 

/***/ }, 
/* 1 */, 
/* 2 */, 
/* 3 */, 
/* 4 */ 
/***/ function(module, exports) { 

    "use strict"; 

    Object.defineProperty(exports, "__esModule", { 
     value: true 
    }); 

    var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

    var SomeClass = (function() { 
     function SomeClass(option) { 
      _classCallCheck(this, SomeClass); 

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

     _createClass(SomeClass, [{ 
      key: "logInfo", 
      value: function logInfo(data) { 
       loggerSheet.appendRow([new Date(), "INFO", data]); 
      } 
     }]); 

     return SomeClass; 
    })(); 

    exports["default"] = SomeClass; 
    module.exports = exports["default"]; 

/***/ } 
/******/ ]); 

Answer 1

Come ho detto nei commenti, GAS isn' t il tuo javascript di tutti i giorni, per superare quell'errore puoi creare un Var globale "SomeClass", quindi rimuovere la parola chiave var prima della funzione dichiarata all'interno della funzione principale. Questo eliminerà questo errore, ma ne sorgerà un altro.

Qual è il tuo obiettivo finale con questo pacchetto web? Perché è importante all'interno di GAS?

Answer 2

Così ho giocato con questo per un po 'ora; utilizzando ESP transpiled (anche ES7/next features) in GAS. L'ostacolo principale da superare è quello di esporre le funzioni dei moduli allo scopo globale.

Nei browser potrebbe essere window o document. In GAS non esiste tale globale. Quello che ho etichettato è il contesto this nel principale Code.gs.

Webpack consente di creare moduli stand alone per distribuire librerie, ecc. This is the link to the Webpack docs that covers changing the output module type.

output: { 
    libraryTarget: "this", 
    path: __dirname + '/dist', 
    filename: 'Code.gs' 
}, 

Ecco come dovrebbe apparire la configurazione di output.

Si dovrebbe quindi funzioni di esportazione dal file principale .js di averli allegare al contesto globale, in questo modo:

export function onInstall(e) { 
    onOpen(e); 
} 

Da qui è necessario copiare e incollare lo script come si farebbe normalmente nello script GAS Editor e farlo funzionare con la funzione onInstall per dargli accesso all'unità/fogli/ecc.

Spero che questo aiuti!