如何使用Webpack转换打字稿以与AWS Sam-cli兼容

时间:2019-02-09 16:26:46

标签: typescript webpack aws-sam-cli

我正在尝试使用webpack进行转换以在AWS sam local上运行打字稿,但由于所有额外的webpack输出,sam local无法找到导出的处理程序函数。

如果我只运行tsc并转换我的代码,那么lambda函数运行良好,那么我的问题是有可能使用webpack转换打字稿,而无需添加所有额外的webpack模块内容吗?或者,如果没有其他建议,请确保我的构建与AWS sam-cli兼容

我当前代码遇到的错误是TypeError:处理程序不是函数

这是我的webpack输出

exports["handler"] =
/******/ (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] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, 
module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = 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;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter)     
{
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { 
enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && 
Symbol.toStringTag) {
/******/            Object.defineProperty(exports, 
Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { 
value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && 
value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { 
enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var 
key in value) __webpack_require__.d(ns, key, function(key) { return 
value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non- 
harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return 
module['default']; } :
/******/            function getModuleExports() { return 
module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { 
return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 
"./src/lambda/users/register/index.ts");
/******/ })

 /**************************************************************/
/******/ ({

/***/ "./src/lambda/users/register/index.ts":
/*!********************************************!*\
  !*** ./src/lambda/users/register/index.ts ***!
  \********************************************/
/*! exports provided: handler */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export 
(binding) */ __webpack_require__.d(__webpack_exports__, \"handler\", 
function() { return handler; });\n\nvar __awaiter = (undefined && 
undefined.__awaiter) || function (thisArg, _arguments, P, generator) 
{\n    return new (P || (P = Promise))(function (resolve, reject) 
{\n        function fulfilled(value) { try { 
step(generator.next(value)); } catch (e) { reject(e); } }\n        
function rejected(value) { try { step(generator[\"throw\"](value)); 
} catch (e) { reject(e); } }\n        function step(result) { 
result.done ? resolve(result.value) : new P(function (resolve) { 
resolve(result.value); }).then(fulfilled, rejected); }\n        
step((generator = generator.apply(thisArg, _arguments || 
[])).next());\n    });\n};\nvar __generator = (undefined && 
undefined.__generator) || function (thisArg, body) {\n    var _ = { 
label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1];  
}, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), 
\"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === 
\"function\" && (g[Symbol.iterator] = function() { return this; }), 
g;\n    function verb(n) { return function (v) { return step([n, 
v]); }; }\n    function step(op) {\n        if (f) throw new 
TypeError(\"Generator is already executing.\");\n        while (_) 
try {\n            if (f = 1, y && (t = y[op[0] & 2 ? \"return\" : 
op[0] ? \"throw\" : \"next\"]) && !(t = t.call(y, op[1])).done) 
return t;\n            if (y = 0, t) op = [0, t.value];\n            
switch (op[0]) {\n                case 0: case 1: t = op; break;\n                
case 4: _.label++; return { value: op[1], done: false };\n                
case 5: _.label++; y = op[1]; op = [0]; continue;\n                
case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                
default:\n                    if (!(t = _.trys, t = t.length > 0 && 
t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; 
}\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && 
op[1] < t[3]))) { _.label = op[1]; break; }\n                    if 
(op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; 
}\n                    if (t[2]) _.ops.pop();\n                    
_.trys.pop(); continue;\n            }\n            op = 
body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } 
finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { 
value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nvar _this = 
undefined;\nvar handler = function (event) {\n    if (event === void 
 0) { event = {}; }\n    return __awaiter(_this, void 0, void 0, 
 function () {\n        var response;\n        return 
__generator(this, function (_a) {\n            console.log('Hello 
World!');\n            response = JSON.stringify(event, null, 2);\n            
return [2 /*return*/, 'success'];\n        });\n    });\n};\n\n\n//# 
sourceURL=webpack://handler/./src/lambda/users/register/index.ts?");

/***/ })

/******/ });

这是原始的src代码

'use strict'
export const handler = async (event: any = {}): Promise<any> => {
    console.log('Hello World!');
    const response = JSON.stringify(event, null, 2);
    return response;
}

这是运行的tsc编译代码(我确实收到了一个错误,但我知道为什么会这样,并且这不是要解决的问题)

 'use strict';
 var __awaiter = (this && this.__awaiter) || function (thisArg, 
_arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try {           
step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"] . 
 (value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) 
: new P(function (resolve) { resolve(result.value); 
 }).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || 
 [])).next());
     });
};
var __generator = (this && this.__generator) || function (thisArg, 
 body) {
     var _ = { label: 0, sent: function() { if (t[0] & 1) throw 
 t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) 
 }, typeof Symbol === "function" && (g[Symbol.iterator] = function() 
{ return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); };  
}
     function step(op) {
         if (f) throw new TypeError("Generator is already 
executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? 
 y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t 
 = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: 
 false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                 default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length 
 - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                     if (op[0] === 3 && (!t || (op[1] > t[0] && 
 op[1] < t[3]))) { _.label = op[1]; break; }
                     if (op[0] === 6 && _.label < t[1]) { _.label = 
 t[1]; t = op; break; }
                     if (t && _.label < t[2]) { _.label = t[2]; 
 _.ops.push(op); break; }
                     if (t[2]) _.ops.pop();
                     _.trys.pop(); continue;
             }
             op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : 
 void 0, done: true };
     }
 };
var _this = this;
exports.__esModule = true;
 exports.handler = function (event) {
     if (event === void 0) { event = {}; }
    return __awaiter(_this, void 0, void 0, function () {
         var response;
         return __generator(this, function (_a) {
             console.log('Hello World!');
             response = JSON.stringify(event, null, 2);
             return [2 /*return*/, 'success'];
         });
        });
 };

我尝试了多个不同的libraryTargets,但没有一个起作用

1 个答案:

答案 0 :(得分:-1)

对新用户来说是个好问题! (我认为)这就是解决方案。


默认情况下,如果您在源代码中导入某些库,则Webpack会将其包含在它产生的捆绑软件中。这对于Web来说非常整洁,因为您可以构建一个使用许多程序包的整个应用程序,然后将整个程序捆绑到一个.js文件中,然后将其提供给访问您网站的用户。 Webpack可以做很多事情,但这就是为什么它是 web捆绑器

但是,在构建云功能时,情况有所不同。与某些随机访问网站的人相反,将为您的Web功能提供服务的服务器已经具有您要使用的库。只要我记得,您就可以告诉AWS您将使用标准package.json的库。

因此,如何告诉webpack 不要包括服务器已经“知道”的库?简单的分析器,请在webpack.config.js中使用external参数。示例:

// in webpack.config.js
module.exports = {
  // ...
  externals: {
    react: 'react', // tells webpack not to include the react package inside its bundle
  }
}

顺便说一下,这就是为什么tsc“有效”的原因,因为它只能编译代码,却不能捆绑您所提供的所有内容代码需要放在一个文件中。