如何使用 TypeScript 在輸出目錄中包含 node_modules

Question

我想知道是否可以在運行 tsc 命令后將 node_modules 文件夾復制到輸出目錄中。

我的情況是我有一個帶有 TypeScript 的項目並使用了一些 npm 包。 而且我需要我的輸出目錄具有所有 npm 依賴項，因為我需要壓縮它並通過 http 發送（到 AWS Lambda）。

我的項目結構是這樣的：

|-.vscode --> visual studio code
|-lib --> output dir
|-node_modules --> npm dependencies
|-src --> .ts files
|-jsconfig.json
|-tsconfig.json

怎樣才能實現呢？

非常感謝！

Answer 1

與公認的解決方案相比，我更喜歡Peopleware 的解決方案，但您甚至不需要為此大吃一驚。 您可以簡單地在 package.json 中執行此操作：

{
  "scripts": {
    "build": "tsc <your command line options>",
    "postbuild": "cp package.json dist/package.json && cd dist && npm install --only=production"
  }
}

這樣做的好處是您不會復制整個node_modules文件夾，因為它可能有大量僅在開發期間使用的依賴項。

您可以對靜態資產（例如圖像或其他資產）執行相同操作：

"copy-statics": "cp -r static dist/static"

更新：與使用npm install --only-production ，復制package.json和package-lock.json然后運行npm ci --production更安全。 這確保您只安裝package-lock.json的依賴項快照。 所以命令看起來像這樣：

"postbuild": "cp package.json dist/package.json && cp package-lock.json dist/package-lock.json && cd dist && npm ci --production"

Answer 2

您應該能夠cp目錄。 如果你想自動化它，你可以在 package.json 中的 npm 腳本中包裝你的tsc和cp調用：

{
    "scripts": {
        "build": "tsc <your command line options>",
        "postbuild": "cp -R node_modules lib/node_modules"
    }
}

然后，當您使用npm run build您的cp命令也應該自動運行。

Answer 3

為此，我創建了一個簡單的gulp任務。

gulpfile.js：

var gulp = require('gulp');
var install = require('gulp-install');

const PROD_DEST = '../dist';

gulp.task('default', function () {
    return gulp.src(['./package.json'])
        .pipe(gulp.dest(PROD_DEST))
        .pipe(install({
            args: ['only=production']
        }));
});

---

package.json :

...
"scripts": {
  "build:prod": "tsc && gulp"
}
"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-install": "^0.6.0",
},
...

這樣我就可以運行npm run build:prod將 TypeScript 源轉換為PROD_DEST 。
gulp復制package.json到該文件夾並運行npm install --only=production中它僅安裝運行時依賴。
這種方法是清潔的，如果你有很多devDependencies與平台無關的。

Answer 4

此解決方案是對幼稚的“復制整個文件夾”解決方案的改進。 它僅將需要的依賴項和/或 devDependencies 從源 node_modules 復制粘貼到目標文件夾。 僅適用於 POSIX 環境。 如果跨平台是強制性的，那么我建議您堅持使用cp策略或 node-js 腳本。

{
    "scripts": {
        "build": "tsc <your command line options>",
        "postbuild": "out='lib/node_modules' && root=$(npm root) && mkdir -p $out && npm ls --production --parseable | tail --lines=+2 | sed \"s%$root%%\" | cut --delimiter='/' --fields=2 | sort | uniq | xargs -I % cp -r \"$root/%\" $out"
    }
}

您可以分別使用npm ls命令的--production和--development標志僅列出依賴項或 devDependencies

這個怎么運作

out='lib/node_modules' \               # output dir relative to package.json
&& root=$(npm root) \                  # get path to node_modules dir
&& mkdir -p $out \
&& npm ls --production --parseable \   # (1)
| tail --lines=+2 \                    # (2)
| sed "s%$root%%" \                    # (3)
| cut --delimiter='/' --fields=2 \     # (4)
| sort | uniq \                        # (5) optional
| xargs -I % cp -r "$root/%" $out      # (6)

(1)列出包。 我們使用npm ls以樹的形式列出已安裝的包。 請注意，默認格式輸出包含多余的信息，並且可以多次列出包。 因此我們使用--parseable標志。

$ npm ls --parseable                                           
/home/code
/home/code/node_modules/mongoose
/home/code/node_modules/is-typed-array
/home/code/node_modules/is-typed-array/node_modules/es-abstract
...

(2)刪除第一個輸出行，因為我們不會使用它。 這里包is-typed-array有它自己的包es-abstract副本。

/home/code/node_modules/mongoose
/home/code/node_modules/is-typed-array
/home/code/node_modules/is-typed-array/node_modules/es-abstract
...

(3)從每個包路徑中刪除 node_modules 路徑。

/mongoose
/is-typed-array
/is-typed-array/node_modules/es-abstract
...

(4)保留第一個路徑成員

/mongoose
/is-typed-array
/is-typed-array
...

(5)去除重復行。 此步驟是可選的，但建議使用，因為我們不會多次復制同一個包。 但是，它可以減慢整個過程。

mongoose
is-typed-array
...

(6)最后一步：復制。 您可以使用xargs -t記錄已執行的操作

cp -r /home/code/node_modules/is-typed-array lib/node_modules
cp -r /home/code/node_modules/mongoosee lib/node_modules
...

Answer 5

這不是最優雅的解決方案，但我能夠通過將package.json復制到/dist文件夾並運行yarn install來做到這一點。 構建腳本是這樣的：

1. tsc -> ts 文件到/dist
2. 將package.json （使用 ts-node）復制到/dist
3. 將./src/views復制到/dist/views （用於 Express）
4. cd ./dist然后yarn install

Answer 6

您可以簡單地使用 jenkins post build action 並定義如下

cp -R target/classes/static ../../../uistatic/dev

您可以選擇您選擇的路徑。