【问题标题】:TypeScript webpack build is not including node_modulesTypeScript webpack 构建不包括 node_modules
【发布时间】:2019-04-12 04:25:29
【问题描述】:

为什么webpack在将node_module库导入索引文件时不包含在构建中?

webpack 对我来说仍然是一个我没有完全掌握的魔法,所以下面是我试图实现的解释。

我正在构建一个测试应用程序,以在 AWS Lambda 节点服务器上作为无服务器代码运行。目标是通过在服务器上拥有 1 个或更多块且没有 node_modules 文件夹来使部署包尽可能小。

我正在使用 Typescript v3 编写并使用 webpack v4 为服务器创建一个包。

这是我的目录结构:

  • 分布/
  • node_modules/
  • src/index.ts
  • package.json
  • tsconfig.json
  • tslint.json
  • webpack.config.js

这是我的 package.json 的摘录

  "dependencies": {
    "moment": "^2.22.2"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.15",
    "@types/node": "^10.12.2",
    "awesome-typescript-loader": "^5.2.1",
    "aws-lambda": "^0.1.2",
    "source-map-loader": "^0.2.4",
    "ts-node": "^7.0.1",
    "tslint": "^5.11.0",
    "tslint-loader": "^3.5.4",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2"
  }

我试图捆绑的 index.ts:

import { Handler } from "aws-lambda";
import moment from "moment";

const handler: Handler = async ( event: any ) => {
    const stamp = moment().format( "x" );
    console.log( `process: ${ process.env.NAME } called at ${ stamp }` );
    console.log( event );
    return {
        body: "process completed",
        statusCode: 200
    };
};

export { handler };

我的 tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "pretty": false,
        "removeComments": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "types": [
            "node"
        ],
        "lib": [
            "es5",
            "es6",
            "dom"
        ]
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

最后是我的 webpack.config.js:

const path = require( "path" );
const UglifyJSPlugin = require( "uglifyjs-webpack-plugin" );
const nodeExternals = require( "webpack-node-externals" );

const ROOT = path.resolve( __dirname, "src" );
const DESTINATION = path.resolve( __dirname, "dist" );

module.exports = {
    context: ROOT,
    mode: "production",
    entry: {
        index: "./index.ts"
    },
    target: "node",
    externals: [ nodeExternals() ],
    optimization: {
        minimizer: [
            new UglifyJSPlugin( {
                uglifyOptions: {
                    compress: true,
                    mangle: false,
                    toplevel: false,
                    keep_classnames: true,
                    keep_fnames: true
                }
            } )
        ],
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
    },
    output: {
        filename: "[name].js",
        libraryTarget: "commonjs2",
        path: DESTINATION
    },
    resolve: {
        extensions: [ ".ts", ".js" ],
        modules: [ ROOT, "node_modules" ]
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                use: "source-map-loader"
            },
            {
                enforce: "pre",
                test: /\.ts$/,
                exclude: /node_modules/,
                use: "tslint-loader"
            },
            {
                test: /\.ts$/,
                exclude: [ /node_modules/ ],
                use: "awesome-typescript-loader"
            }
        ]
    },
    devtool: "cheap-module-source-map",
    devServer: {}
};

当我运行 webpack 时,我得到以下控制台输出:

Version: webpack 4.25.1
Time: 4856ms
Built at: 2018-11-08 15:41:09
   Asset      Size  Chunks             Chunk Names
index.js  3.83 KiB       0  [emitted]  index
Entrypoint index = index.js
[0] ./index.ts 3.11 KiB {0} [built]
[1] external "moment" 42 bytes {0} [built]

当我将它部署到 AWS Lambda 并调用该函数时,我收到以下错误:

{
    "errorMessage": "Cannot find module 'moment'",
    "errorType": "Error",
    "stackTrace": [
    "Function.Module._load (module.js:474:25)",
    "Module.require (module.js:596:17)",
    "require (internal/module.js:11:18)",
    "Object.<anonymous> (/var/task/index.js:1:3963)",
    "__webpack_require__ (/var/task/index.js:1:323)",
    "Object.<anonymous> (/var/task/index.js:1:3595)",
    "__webpack_require__ (/var/task/index.js:1:323)",
    "module.exports.__awaiter.__awaiter.P (/var/task/index.js:1:1650)",
    "Object.<anonymous> (/var/task/index.js:1:1695)"
    ]
}

【问题讨论】:

  • 有什么消息吗,因为我有同样的问题?
  • 因为 nodeExternals,它将每个依赖项声明为外部的(即:必须存在 node_modules)
  • nodeExternals 是关键,现在它可以找到该模块,但会引发一个单独的错误供我调查。 @PlayMa256 如果您将其添加为答案,我将接受它
  • 作为对未来读者的附注,分块构建会导致服务器上的调用错误,因为根文件没有专门加载其他块文件,删除 splitChunks 对象将使 webpack 构建一个大文件工作。

标签: typescript webpack aws-lambda


【解决方案1】:

因为 nodeExternals,它将每个依赖项声明为外部的(即:执行时必须存在 node_modules)。

【讨论】:

    猜你喜欢
    • 2018-02-17
    • 2017-10-31
    • 1970-01-01
    • 2019-08-30
    • 1970-01-01
    • 1970-01-01
    • 2019-08-06
    • 2017-06-26
    • 2017-09-27
    相关资源
    最近更新 更多