モジュール性は大きな傾向であり、私はこの列車では最初のホップではない.今日、私はどのように簡単にバニラJavaScriptといくつかの素晴らしいツールを使用してマルチモジュールのアプリを構築することができますを表示するつもりです.

レシピ

成分

まず第一に、私はあなたがあらかじめいくつかのことを知っていると仮定するつもりです.

オブジェクト指向プログラミング

jsの書き方

NPMの基礎

ステップ

地面

プロジェクトのための空のディレクトリから始めましょう

npm init

とメインファイルを作成するindex.js 古い学校JSのクラスで

function Unicorn(name) {
    this.name = name;
}
Unicorn.prototype = {
    shine: function() {
        // All kind of good stuff here 🦄
    }
}

var dazzle = new Unicorn("Dazzle");
dazzle.shine();

デカップリング

今すぐあなたが使用したいイメージUnicorn 別のプロジェクトのクラス、または単にオープンソースの人間.別のディレクトリを別のrepoで作成することはできますが、スマートにしましょう.The Unicorn クラスは、私たちが明快さのためにNPM Scopedパッケージ名を使用するユニコーンプロジェクトにリンクされます.
すべてが減少index.js コードの3行に.

import Unicorn from "@unicorn/model";

var dazzle = new Unicorn("Dazzle");
dazzle.shine();

次に、モジュールのサブディレクトリを作成します.

mkdir packages/model
cd packages/model
npm init # and name it @unicorn/model

これにはindex.js その中のクラスも.私たちはインポート/エクスポートステートメントでプレーンブラウザのjsを残したので、なぜ美しいES 6クラスの構文を使用しないでください.

export default class Unicorn {
    constructor(name) {
        this.name = name;
    }

    shine () {
        // All kind of good stuff here 🦄
    }
}

その時点でimport ステートメントは、node_modules サブディレクトリ.我々は相対パスを使用することができますimport Unicorn from "./packages/model/index.js"; . 良いことはパッケージ間のリンクを作成することです.
ありがたいことに、NPMはあなたのためにそれを行うことができますlink command . それが我々のケースに見えるものは、ここにあります.

cd packages/model
npm link
cd ..
npm link @unicorn/model

パーフェクト!

ラッピング

Ok nice one, but now I can't use it in my browser, you dumbo !

まず、あなたはどのように私を呼んでいますか?
そうしたら、今のところ、それはすべての実験的な構文とものですが、それを処理するためのツールがあります.私はBabelでWebpackを使うのが好きです、もちろん、それは唯一の解決でありません.
プロジェクトのルートにいくつかのパッケージを追加します.

npm install --save-dev babel-loader babel-core babel-preset-env webpack

WebPackの設定全体が別の記事を記入することができますので、私はちょうどその仕事を表示します.新しいファイルを設定するwebpack.config.js いくつかの手順で内部.

module.exports = {
    entry: "./index.js", // Main file to read
    module: {
        rules: [{
            test: /\.js$/, // For all file ending with ".js"
            use: {
                loader: "babel-loader", // Use babel
                options: {
                    presets: ["babel-preset-env"],
                },
            },
        }],
    },
    output: {
        filename: "dist/unicorn.js", // Output the result in another file
        library: "Unicorn", // Under "Unicorn" namespace
        libraryTarget: "this",
        libraryExport: "default",
    },
};

それから、あなたが走るならばnpx webpack それはプレーンなWebブラウザで使用可能な1つのファイルにすべてのソースを構築します.

管理

現在、多くのサブモジュールを作成し、それらをすべて1つのファイルにラップできます.サブサブモジュールを持つこともできます.ちょうどそれらをすべて入れなさいmodules ディレクトリ.
あなたのプロジェクトが成長するにつれて、それは難しく、すべてのこの動物園を管理するのは難しいでしょう.
どこlerna 遊びに出る.

npm install -save-dev lerna

それを考えるnpm link ステロイド
プロジェクトページの完全なドキュメントをチェックしてください.

npx lerna clean # Remove all node_modules directories
npx lerna bootstrap # Install remote dependencies and link local ones
npx lerna add package # Install a package to all sub-modules
npx lerna add package --scope=sub-module # Install a package to a specific sub-module
npx lerna publish # Bump, tag and publish all your modules over NPM

エンジョイ

これで、可能な限り最もエレガントなプロジェクトを書くためにトラックにする必要があります.頼りにしていますよ.)
より詳細な例が欲しいならば、私は現在もう一つを構築していますJS drawing library 非常に同じテクニックを使用する.
次回は、自動テストとどのように多くのバグをキャッチし、時間とともに一貫性を確保するについて話します.