在节点中构建项目时如何将 .env 和其他文件放在 dist 文件夹中？

Posted 2023-03-08

【中文标题】在节点中构建项目时如何将 .env 和其他文件放在 dist 文件夹中？

【英文标题】：How to put .env and other filed in dist folder while building project in node?

【发布时间】：2020-10-03 13:28:11

【问题描述】：

我在我的节点项目中使用 Typescript，这是我的 tsconfig -

    "compilerOptions": 
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist/application",
        "baseUrl": "./src",
        "paths": 
            "*": [
                "node_modules/*",
                "src/shared/types/*"
            ]
            
    ,
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "typedocOptions": 
        "mode": "modules",
        "out": "docs"
    

这是我的应用程序文件夹结构 -

.
├── dist
│   └── application
│       ├── app.js
│       ├── app.js.map
│       ├── modules
│       └── shared
├── environments
│   └── .env.development
├── node_modules
├── nodemon.json
├── package-lock.json
├── package.json
├── security
│   ├── domain.crt
│   └── domain.key
├── src
│   ├── app.ts
│   ├── modules
│   │   ├── chat
│   │   ├── main-controller.ts
│   │   └── sso
│   └── shared
│       ├── constants
│       ├── models
│       ├── types
│       └── utils
├── tsconfig.json
└── typedoc.json

编译后，Typescript 编译器将所有内容放在 .dist/application 中。

在开发过程中，我的主文件 (app.ts) 位于 ./src/app.ts 中。在这个 app.ts 文件中，我试图读取 ./src/app.ts 中的 .env.development 文件。 这就是我在 app.ts 中读取此文件的方式 -

config( path: resolve(Utils.getAppRoot(), "../environments/.env.development") );

但在运行时系统无法解析 .env 文件的路径，因为 TS 编译器将 app.ts 代码放在 ./dist/application/app.js 中，而 Node 无法找到 .env 文件的路径。 env 文件相对于当前根路径。

要解决此问题，我需要在编译时将所有配置/静态文件（此处为 .env 文件）复制到 ./dist 文件夹中。

有人可以帮我设置 ts-config 以便在编译时将这些静态文件复制到 ./dist/folder 吗？

【参考方案1】：

我认为你不能使用 TypeScript 编译器来做到这一点。相反，我建议使用 NPM 脚本来执行此操作。您可以为每个目标环境定义单独的构建任务。例如，您可以定义build-dev任务来为开发环境构建项目，如下所示。

"build-dev": "cp .env.development ./dist/.env && tsc"

您可以为每个环境创建一个脚本并将正确的.env 文件复制到dist 文件夹。然后，您可以使用 NPM 运行命令运行这些任务，例如：

npm run build-dev

【讨论】：

我可以使用任何其他工具，例如 webpack 吗？

是的，您可以使用包括 webpack 在内的几乎所有构建工具来完成。你可以看看webpack.js.org/plugins/copy-webpack-plugin。

cp 命令在 Windows 上不可用，您必须使用 copy

一篇博文，其中包含使用 npmjs 插件 copyfiles 获得与平台无关的解决方案的信息。 vccolombo.github.io/blog/…

【参考方案2】：

上一个答案对您当前的项目结构是正确的。如果您想在 TSC 构建中包含一个 .env 文件，您可以将一个 .env 文件放在项目的根目录中，然后将 tsconfig.json 文件更改为如下所示

  "compilerOptions": 
  /* Basic Options */
  "incremental": true /* Enable incremental compilation */,
  "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
  "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
  "allowJs": true /* Allow javascript files to be compiled. */,
  "checkJs": false /* Report errors in .js files. */,
  "outDir": "./dist" /* Redirect output structure to the directory. */,
  "strict": true /* Enable all strict type-checking options. */,
  "alwaysStrict": true ,
  "rootDirs": [
    "./src",
    "./public",
    "./db"
  ] ,
  "typeRoots": [
    "@types",
    "./node_modules/@types"
  ] ,
  "esModuleInterop": true ,
  "inlineSourceMap": true ,
  "forceConsistentCasingInFileNames": true 
,
  "include": [ "./.env", "./src", "./public"],
  "exclude": ["node_modules", "test", "e2e"]