(日記) Typescriptのプロジェクトを用意するルーチンワーク

環境

Raspberry PI 4
Ubuntu 22.04 Server

node.js導入

sudo apt install npm -y
sudo -E npm -g i n
sudo -E n latest
# 最新node.jsを実行パスに通すためshell再起動

動作確認

簡単なJavaScript/TypeScript実行

Version確認

npm -v
node -v

サンプル(index.js/index.ts)

console.log(`This is ${process.argv[1]}.`)

JavaScript実行

node index.js
# This is /.../index.js.

TypeScript実行

npx -y ts-node index.ts
# This is /.../index.ts.

JavaScriptプロジェクト作成

Javascriptプロジェクト

npm init -y

package.jsonが生成される。

依存モジュール追加

依存モジュール追加

npm i axios # 例:axiosを使用する場合

依存モジュールは./node_modules以下にダウンロードされ、package.jsonに記載される。
以降 npm iでpackage.jsonに記載済の依存モジュールをすべてダウンロードできる。

(おまけ) 中間生成ファイルをコミットしたくない

.gitignore サンプル

/node_modules/
/package-lock.json
/build/

TypeScriptプロジェクト作成

Typescriptプロジェクト

npm init -y
npm i -D typescript @types/node
npx tsc --init --rootDir src --outDir build

tsconfig.jsonが生成される
好みでソースとビルドディレクトリを指定

TypeScriptのビルドと実行

Build & Run

npx tsc
node build/index.js

srcディレクトリ以下のtsファイルがビルドされbuildディレクトリ以下にjsファイルが生成される。

ts-nodeで実行する場合

npx -y ts-node index.ts
# This is /home/ubuntu/.npm/_npx/1bf7c3c15bf47d04/node_modules/.bin/ts-node.

バンドル/圧縮 - Webpack

導入

npm i --save-dev webpack webpack-cli crypto-browserify child_process stream-browserify dgram-browserify net-browserify

webpack.config.js(Webブラウザ向けサンプル)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

webpack.config.js(node向けサンプル)

module.exports = {
    target: 'node',
    mode: 'production',
    // mode: 'development',

    entry: './build/index.js',
    output: {
        path: __dirname + '/dest',
        filename: 'bundle.js'
    },
    resolve: {
        fallback: {
            // crypto: require.resolve("crypto-browserify"),
            // assert: require.resolve("assert/"),
            // stream: require.resolve("stream-browserify"),
            // dgram: require.resolve('dgram-browserify'),
            // net: require.resolve('net-browserify')
        }
    },
    externals: [
        // 'child_process'
    ]
};

バンドルと実行

npx webpack
node dest/bundle.js