使用 Vite 建立 npm 套件

Others
, , ,

實作

建立專案。

1
2
npm create vite
cd vite-library-example

修改 main.js 檔，建立主程式。

1
2
3
4
5
6
7
const hello = () => {
  console.log('Hello');
};

export {
  hello,
};

新增 vite.config.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: [
        //
      ],
      output: {
        globals: {
          //
        },
      },
    },
  },
});

修改 package.json 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "@memochou1993/vite-library-example",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.0.9"
  },
  "files": [
    "dist"
  ],
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  }
}

執行編譯，並監聽變化。

1
npm run build -- --watch

預覽

使用 UMD 標準引入

修改 index.html 檔，將編譯好的套件引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/my-lib.umd.js"></script>
    <script>
      MyLib.hello();
    </script>
  </body>
</html>

啟動服務。

1
npm run dev

使用 ES 模組引入

修改 index.html 檔，將編譯好的套件引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { hello } from '/dist/my-lib.es.js';
      hello();
    </script>
  </body>
</html>

啟動服務。

1
npm run dev

發布

登入 npm 套件管理平台。

1
npm login

測試發布，查看即將發布的檔案列表。

1
npm publish --dry-run

發布套件。

1
npm publish --access=public

使用

下載套件。

1
npm i @memochou1993/vite-library-example

修改 index.html 檔，將編譯好的套件引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { hello } from '@memochou1993/vite-library-example';
      hello();
    </script>
  </body>
</html>

程式碼

參考資料