【Vue】Webpackに頼らない自力ビルド環境の構築（npm）

めんどくさい

Webpack使うのもいいけどなんというか暗記できるような小さい環境でビルドしたい。いちいちWebpackの設定をググるのもめんどくさい。自分の持ってる知識だけでビルドしたい。

必要なパッケージ

• javascript-obfuscator ... ビルドファイルの難読化を行う
• nodemon ... ソースファイルを監視してビルドを走らせる
• vue ... Vue3

スクリプト

copy

npm_test/srcにソースファイルがあるという前提。それを../path/to/app/js/main.jsにビルドする。
ビルド方法は簡単でcatコマンドでコードを連結して出力するだけ。

{
  "scripts": {
    "copy": "cat node_modules/vue/dist/vue.global.js src/main.js > ../path/to/app/js/main.js"
  },
}

取り込みたいライブラリが増えたら編集してcatとするファイルを増やす。

watch

nodemonでnpm_test/src以下のファイルを監視し、編集があったら自動でビルドする。ビルドにはcopyスクリプトを使う。

{
  "scripts": {
    "watch": "nodemon -L --watch src --watch --ext js --exec \"npm run copy\""
  }
}

build

javascript-obfuscatorでソースコードを難読化するスクリプト。npm run buildで本チャンビルドができる。

{
  "scripts": {
    "build": "cat node_modules/vue/dist/vue.global.js src/main.js | node build.js > ../path/to/app/js/main.js"
  }
}

build.js

process.stdin.setEncoding('utf8');

let data = ""

process.stdin.on('data', (chunk) => {
    data += chunk
});

process.stdin.on('end', () => {
    var JavaScriptObfuscator = require('javascript-obfuscator');
    var obfuscationResult = JavaScriptObfuscator.obfuscate(
        data,
        {
            compact: false,
            controlFlowFlattening: true,
            controlFlowFlatteningThreshold: 1,
            numbersToExpressions: true,
            simplify: true,
            stringArrayShuffle: true,
            splitStrings: true,
            stringArrayThreshold: 1
        }
    );
    const code = obfuscationResult.getObfuscatedCode()
    process.stdout.write(code)
});

あとはこれをコマンド一発で初期化できるスクリプトを作る

あとはこれらの環境をコマンド一発で初期化できるスクリプトを作り、新しいアプリを作るときはそのスクリプトで環境を用意する。たぶんラクだと思う。