Zenn
🐾

ライブラリ化したwebpackを別のアプリから呼び出す

2022/05/23に公開
JavaScript
Node.js
webpack
tech

概要

  • webpackのライブラリ機能を使う
  • 別のアプリケーションからライブラリをインストールして使用してみる

目標

  • 備忘録として簡単な「hello world」アプリを作る

手順

1. node.jsアプリケーションを作成しwebpackでビルドを行える状態にする

ディレクトリ
 |- webpack.config.js
 |- package.json
 |- /src
 |- index.js
npm init
npm init -y
npm install --save-dev webpack webpack-cli
src/index.js
  • exportしておくのがポイント
 export function hoge() {
  alert('hello world');
}
webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js',
    // ライブラリの設定
    library: {
      name: 'helloWorld',
      type: 'umd',
    },
  },
};
package.json
  • nameがライブラリの名前になります
  • mainがライブラリとして扱うファイルになります
{
  "name": "sample-library",
　　　　"main": "dist/main.bundle.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
  },
  ...
}
webpack build
  • yarn startしてsrc/index.jsをdist/main.bundle.jsに出力する
git add, git commit, git push origin master
  • 作成したライブラリをgitリポジトリにpushする

2. 別のアプリからライブラリの呼び出しを行う

ディレクトリ
  • ライブラリとほぼ同じ構成(自由ですが今回は似た構成にする)
 |- webpack.config.js
 |- package.json
 |- /src
 |- index.js
 |- index.html
./src/index.js
  • import方法1 { 関数名 }
import { hoge } from 'sample-library';
hoge()
  • import方法2 ライブラリ名.関数
import helloWorld from 'sample-library';
helloWorld.hoge();
./src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <script src="dist/main.bundle.js"></script>
  </body>
</html>
ライブラリのインストール
  • cloneするときのURLのhttps://github.com/以下を使う
yarn add user-name/sample-library
ビルド / 結果
  • jsのビルドを行い、htmlをブラウザで表示する
  • hello worldがalertされればOK
参考

Discussion