在Google Apps Script =>中使用透明的ES6 ReferenceError：“SomeClass”没有定义 [英] Using transpiled ES6 in Google Apps Script => ReferenceError: "SomeClass" is not defined
问题描述
我试图在Google电子表格（script.google.com部分）中使用ES6。我对JavaScript很新，也许错误是微不足道的。
- 28/09：我刚刚使用Google Apps脚本库名称（Logger）发布的错误发生了变化，我切换到
SomeClass。我正在寻找模块，因为我的声明不是好的
- 28/09: The error for the post as changed as I was just using a Google Apps Script library name (Logger), I switch to
SomeClass. I'm looking to module as my declaration is not the good one
已经完成了：
- 创建了一个webpack项目
- 创建了一个Logger类
- 创建一个main.js，我导入Logger类
- WebPack从我的main.js生成一个包
- 我复制/将bundle.js粘贴到script.google上的捆绑包文件中
- 我尝试在script.google中运行测试，但获得
ReferenceError：SomeClass不是define.`
- Created a webpack project
- Created a Logger class
- Created a main.js where I import the Logger class
- WebPack generate a bundle from my main.js
- I copy/paste the bundle.js in a bundle file on script.google
- I try to run a test in script.google but got
ReferenceError:SomeClass is not define.`
这是我的代码：
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 / p>
Main.js
import SomeClass from './SomeClass.js';
在script.google 中测试
function test_bundle() {
var someClass = new SomeClass(); //<== breaks here
}
Bundle.js =复制/粘贴到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"];
/***/ }
/******/ ]);
推荐答案
所以我一直在玩这段时间现在;在GAS中使用透明的ES6（甚至ES7 /下一个功能）。您需要克服的主要障碍是将模块中的功能暴露于全球范围。
So I've been playing with this for a while now; using transpiled ES6 (even ES7/next features) in GAS. The main hurdle you need to overcome is exposing the functions in the modules to the global scope.
在浏览器中，这可以是窗口或文档 。在GAS中没有这样的全球性。我标记的是在 Code.gs 中的这个上下文。
In browsers this could be window, or document. In GAS there is no such global. What I've tagged it to is the this context in the main Code.gs.
Webpack允许您构建独立模块来分发库等。这是包含更改输出模块类型的Webpack文档的链接。
Webpack allows you to build stand alone modules to distribute libraries, etc. This is the link to the Webpack docs that covers changing the output module type.
output: {
libraryTarget: "this",
path: __dirname + '/dist',
filename: 'Code.gs'
},
这是你的输出配置应该是这样的。
This is what your output config should look like.
然后您应该从您的主要 .js 文件导出功能，使其附加到全局上下文：
You should then export functions from your main .js file to have them attach to the global context, like so:
export function onInstall(e) {
onOpen(e);
}
从这里你应该像往常一样将脚本复制并粘贴到GAS脚本编辑器，并运行 onInstall 函数，以访问您的驱动器/工作表/等。
From here you should copy and paste the script as you normally would into the GAS Script Editor and have it run the onInstall function to give it access to your drive/sheets/etc.
希望这有帮助！
这篇关于在Google Apps Script =>中使用透明的ES6 ReferenceError：“SomeClass”没有定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
