📦
npmパッケージを公開してみよう！
こんにちは、株式会社palan の xR事業部 でエンジニアをやっている 笹井 です。
概要
はじめてnpmパッケージを作成したので、その手順を整理しました。
npm: https://www.npmjs.com/package/@sasapanchama/joystick
cdn: https://cdn.jsdelivr.net/npm/@sasapanchama/joystick@1.0.0/dist/cdn.bundle.js
GitHub: https://github.com/sasapanchama/joystick
下記については記載していません。今後追加したいです。
- バッジの追加
- ライセンスの追加
手順
準備
開発ディレクトリの作成
mkdir demo-package
cd demo-package
npmユーザーの作成
npm adduser
gitの初期化
git init
/.vscode
/dist
/node_modules
npmの初期化
// NOTE: パッケージ名の被り防止のためにスコープの設定を追加
npm init --scope=@your-npm-name
/.vscode
/node_modules
/src
tsconfig.json
jest.config.json
webpack.config.json
パッケージのインストール
npm i typescript
// NOTE: テストに使用するパッケージのインストール
npm i -D @types/jest @types/jsdom jest jest-environment-jsdom jsdom ts-jest
// NOTE: 検証およびCDNに使用するパッケージのインストール
npm i -D ts-loader webpack webpack-cli webpack-dev-server
...
"scripts": {
"start": "tsc && webpack serve",
"build": "tsc && webpack",
"prepare": "npm run build",
"test": "jest"
},
...
TypeScriptの設定
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts"],
"exclude": ["dist", "node_modules", "test"]
}
Jestの設定
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom'
};
webpackの設定
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/cdn.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'cdn.bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
devServer: {
static: {
directory: path.join(__dirname, ''),
},
port: 3000,
hot: true,
open: true,
},
};
開発
ファイルの作成
mkdir src
touch src/index.ts
touch src/cdn.ts
touch src/DemoPackage.ts
mkdir test
touch test/DemoPackage.test.ts
mkdir cdn
touch cdn/index.html
/src/index.tsの編集
export * from "./DemoPackage";
/src/cdn.tsの編集
import { DemoPackage } from './DemoPackage';
(<any>window).DemoPackage = DemoPackage;
/src/DemoPackage.tsの編集
export class DemoPackage {
public hello() {
console.log("Hello");
}
}
/test/DemoPackage.test.tsの編集
// NOTE:
/cdn/index.htmlの編集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DemoPackage Example</title>
</head>
<body>
<div id="container"></div>
<script src="../dist/cdn.bundle.js"></script>
<script>
const demoPackage = new DemoPackage();
demoPackage.hello();
</script>
</body>
</html>
検証
npm start
公開
npm build
npm publish --access=public
npm: https://www.npmjs.com/package/@{{ your-npm-name }}/{{ your-package-name }}
cdn: https://cdn.jsdelivr.net/npm/@{{ your-npm-name }}/{{ your-package-name }}@{{ version }}/dist/cdn.bundle.js
参考
Discussion