모듈화는 큰 추세이며 이 기차를 처음 타는 사람은 내가 아닙니다. 오늘은 바닐라 자바스크립트와 몇 가지 멋진 도구를 사용하여 다중 모듈 앱을 얼마나 쉽게 구축할 수 있는지 보여드리겠습니다.

레시피

재료

먼저 몇 가지 사항을 사전에 알고 있다고 가정하겠습니다.

객체 지향 프로그래밍

JS 작성법

NPM 기초

단계

땅

프로젝트를 위한 빈 디렉토리(유니콘으로 이름 지정)에서 시작하여 초기화합니다.

npm init

구식 JS 클래스로 기본 파일index.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 클래스를 사용하거나 Humanity에 소스를 공개하고 싶다는 이미지를 만드세요. 다른 리포지토리를 사용하여 다른 디렉터리를 만들 수 있지만 더 똑똑해집시다. Unicorn 클래스는 Unicorn 프로젝트에 매우 연결되어 있으므로 명확성을 위해 NPM 범위 패키지 이름을 사용합니다.
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를 남겼으므로 아름다운 ES6 클래스 구문을 사용하지 않는 이유는 무엇입니까?

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 !

먼저, 저를 어떻게 부르십니까?
그렇다면 네, 알아요. 지금은 모두 실험적인 구문과 내용이지만 이를 처리할 수 있는 도구가 있습니다. 저는 webpack을 babel과 함께 사용하는 것을 좋아합니다. 물론 이것이 유일한 해결책은 아닙니다.

프로젝트의 루트에 일부 패키지를 추가합니다.

npm install --save-dev babel-loader babel-core babel-preset-env 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를 실행하면 모든 소스가 일반 웹 브라우저에서 사용할 수 있는 하나의 파일로 빌드됩니다.

관리

이제 많은 하위 모듈을 생성하고 모두 하나의 파일로 래핑할 수 있습니다. 하위 하위 모듈 등을 가질 수도 있습니다. 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를 만들고 있습니다.

다음 시간에는 자동화된 테스트와 많은 버그를 포착하고 시간이 지남에 따라 일관성을 보장하는 방법에 대해 이야기하겠습니다.