Node.jsのバンドルツールnccを使ってみた

公開日:2018-12-23
最終更新:2018-12-23

ncc: Node.js Compiler Collection とは

Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.

Node.jsモジュールを単一のファイルにコンパイルするためのシンプルなCLI(すべての依存関係、gcc形式)
→ Node.jsのモジュールを設定ファイルなしでminifyしてくれる。webpackのNode.js特化 & 設定ファイルなしみたいな認識で良さそう。

使ってみた

zeitのBlog の手順に沿ってやってみます。
※Windows8.1で検証しました。

npm でグローバルインストール

npm i -g @zeit/ncc  

nccのバージョン確認

ncc version  
0.2.0  

プロジェクトルートフォルダ myapp を作成して、 chalk をインストール

mdkir myapp  
cd myapp  
npm i chalk  

myappindex.js を作成

index.js

const chalk = require("chalk");  
console.log(chalk.blue.bgRed.bold("Hello world!"));  

ビルドしないで実行してみる。

chalk で Hello world! がハイライトされてる。

ncc のビルドコマンドを実行

ncc build  

myapp/dist フォルダに結果ファイルが生成される。

...\myapp\dist>dir /S /B  
...\myapp\dist\index.js  
...\myapp\dist\index.js.map  

ビルド後のindex.js を実行

chalk がバンドルされて Hello world! がハイライトされていることを確認


ncc の詳細な仕様は ncc help または api docs を参照

できなかったこと

ncc run コマンドで一時ファイルにビルドして実行らしいがエラーになる。Windows環境が原因?

myapp>ncc run index.js  
46kB  index.js   [571ms]  
internal/modules/cjs/loader.js:582  
    throw err;  
    ^  

Error: Cannot find module 'C:\Program Files (x86)\Nodist\bin\node_modules\@zeit\ncc\dist\dist\ncc\sourcemap-register'  
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)  
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)  
    at Module.require (internal/modules/cjs/loader.js:636:17)  
    at Module._preloadModules (internal/modules/cjs/loader.js:811:12)  
    at preloadModules (internal/bootstrap/node.js:594:7)  
    at startup (internal/bootstrap/node.js:275:9)  
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)  

Macで検証

nccのバージョン0.6.0でncc runを実行したところ成功した。

参考

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@wakusanの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする