/

如何在Next.js中運行構建時執行腳本

如何在Next.js中運行構建時執行腳本

我試圖看看將我的基於Hugo的博客移植到Next.js是否是一個好的選擇（這並不是）。在這個過程中，我遇到了一個問題。

我需要更改每個圖片的路徑，因為Hugo允許一個帖子與Markdown文件位於同一個文件夾中，而Next.js則不允許這樣做。

但是，我不想打亂我的工作流程。能夠將圖片放在與Markdown文件相同的文件夾中對於編寫和維護都非常方便。

所以我的計劃是：在構建時，我會遍歷所有帖子，收集圖片，並在/public/images中為每個帖子創建一個文件夾。

我只需要更改Markdown中的每個圖片路徑，這是最簡單的部分。

然後，我需要運行一個構建後的命令，創建一個postbuild.mjs文件，其工作是遍歷我的content/posts文件夾，並將每個圖片複製到public/images中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import fs from 'fs'
import path from 'path'
import fsExtra from 'fs-extra'

const source = './content/posts'
const destination = './public/images'

const posts = fs.readdirSync(source)

fsExtra.emptyDirSync(destination)

fs.mkdir(destination, () => {
  posts.map((slug) => {
    if (slug === '.DS_Store') return

    fs.mkdir(`${destination}/${slug}`, () => {
      fs.readdirSync(`${source}/${slug}`)
        .filter((item) =>
          ['.png', '.jpg', '.jpeg', '.gif'].includes(path.extname(item))
        )
        .map((item) => {
          fs.copyFile(
            `${source}/${slug}/${item}`,
            `${destination}/${slug}/${item.replace(/ /g, '-')}`,
            () => {
              console.log(`${destination}/${slug}/${item}`)
            }
          )
        })
    })
  })
})

然後，在package.json文件的scripts中添加一個postbuild項目：

1
2
3
4
5
6
7
8
9
10
{
  ...
  "scripts": {
    "build": "next build",
    "postbuild": "node ./postbuild.mjs",
    "dev": "next dev",
    "start": "next start",
    ...
  }
}

使用相同的技巧，您還可以創建一個在構建之前運行的prebuild條目。

順便提一下，這不僅適用於Next.js，也是npm的一個功能。請參閱 https://docs.npmjs.com/cli/v6/using-npm/scripts#pre—post-scripts。