파일 복사 및 보기 요약 플러그인 만들기

나는 간단한 웹 응용 프로그램을 구축해야 한다.나는 미니멀리즘 방법을 선택했다. 순수한 자바스크립트와 HTML이며, 현대 브라우저에만 적용된다.따라서 Babel과 같은 컴파일/전송 도구는 필요하지 않습니다.하지만 자바스크립트 파일을 묶을 수 있는 도구가 필요하고, 변경할 때마다 관찰자가 필요합니다.Rollup은 제 요구 사항을 충족하는 최고의 도구입니다.

요약 구성
Rollup을 사용하여 구축 프로세스를 설정하는 표준 방법은 Rollup 구성 파일rollup.config.js을 작성하는 것입니다.다음은 간단한 프로필입니다. 저는 그것을 바탕으로 제 방법을 논술하겠습니다.Rollup은 입력main.js부터 시작하는 모든 JavaScript를 대상 폴더dist에 번들로 묶도록 지시합니다.rollup.config.js

export default {
    input: 'main.js',
    output: {
        dir: 'dist',
        format: 'es'
    }
};

이제 다음 도구를 사용하여 요약을 실행할 수 있습니다.

rollup -c -w

표지-c는 프로필을 총괄적으로 사용하도록 지시한다.플래그-w가 모니터링 모드를 활성화합니다.

HTML은요?
제 전화번호가 있습니다index.html.이 폴더는 main.js와 같은 폴더에 배치되며 다음 줄을 포함합니다.

<script src="main.js" type="module"></script>

따라서build destination 폴더에 복사하고 감시 모드에서 변경할 때 다시 복사하면 됩니다.그러나 Rollup은 기본적으로 HTML 파일을 처리하는 방법을 모르는 JavaScript만 처리합니다.이를 위해, 우리는 플러그인을 사용해야 한다.
이 경우, 많은 플러그인들이 도움이 될 수 있습니다.그들 중 일부는 매개 변수에 따라 자신의 index.html 파일을 만든다.일부는 특정 자산을 복제하기 위해 설계된 것일 뿐이다.나는 그 중 일부를 시험해 보았지만 선택에 실망했다.많은 의존항과 내가 필요로 하지 않는 것들이 있는데, 내가 필요로 하는 것은 파일을 복사하고 변경할 때마다 다시 복사하는 것이다.그래서 나는 내 플러그인을 쓰기로 결정했다.

요약 플러그인 작성
플러그인은 하나의 대상으로 속성name과 하나 이상의 구축 연결이라고 불리는 함수를 가지고 있다.이것은 두 개의 연결고리buildStart와 generateBundle가 있는 구조의 예이다.

{
    name: 'my-rollup-plugin',
    async buildStart() => {
        // do some stuff
    },
    async generateBundle() => {
        // do some more stuff
    }
}

갈고리는 구축의 서로 다른 단계에서 호출되는 함수다.현재 Rollup documentation에서 20여 개의 구축 연결을 정의했다.우리는 두 개의 연결고리, 즉 buildStart와 generateBundle를 사용할 것이다.말하자면 전자는 구축 과정이 시작될 때 호출되고 후자는 패키지를 디스크에 쓰기 전에 호출된다.
Rollup 플러그인은 일반적으로 함수에 봉인되어 있으며, 이 함수는 상기 구조를 가진 대상을 되돌려줍니다.이것은 우리로 하여금 추가 매개 변수를 제공할 수 있게 한다.이 예에서, 우리는 두 개의 인자를 제공해야 한다. 그것이 바로 입력과 출력 파일 이름이다.
우리는 이 임무를 완성하기 위해 두 가지 추가 기능을 더 필요로 한다.하나는 Rollup에게 파일의 변경 사항을 확인하라는 것입니다.다른 방법은 파일을 대상 폴더에 저장하는 것입니다.Rollup은 이른바 plugin context 실용 함수를 제공하여 우리가 이 임무를 완성하는 것을 돕는다.이 함수들은 this 대상의 방법으로 대부분의 갈고리에서 사용할 수 있다.우리는 실용 프로그램 함수 this.addWatchFile 를 사용하여 감시 모드에서 감시할 파일을 설정하고 this.emitFile 출력을 생성하는 데 포함할 파일을 정의할 것입니다.
다음은build output 폴더로 파일을 복사하고 변경 사항을 감시하는 플러그인입니다.

function copyAndWatch(fileIn, fileOut) {
    return {
        name: 'copy-and-watch',
        async buildStart() {
            this.addWatchFile(fileIn);
        },
        async generateBundle() {
            this.emitFile({
                type: 'asset',
                fileName: fileOut,
                source: fs.readFileSync(fileIn)
            });
        }
    }
}

내가 사용하고 있다는 것을 알 수 있다fs.이것은 파일 시스템과 상호작용을 허용하는 노드 모듈입니다. 가져와야 합니다.
보통 플러그인을 단독 파일에 저장합니다.그러나 여기서 간단하게 보기 위해서, 나는 rollup.config.js에서 그것을 정의했다. 왜냐하면 그것은 매우 짧은 함수이기 때문이다. 왜냐하면, 그것은 전체 설정에만 사용되기 때문이다.
마지막으로 내 전체 요약 구성 파일은 다음과 같습니다.rollup.config.js

import fs from 'fs';

export default {
    input: 'main.js',
    output: {
        dir: 'dist',
        format: 'es'
    },
    plugins: [
        copyAndWatch('index.html', 'index.html')
    ]
};

function copyAndWatch(fileIn, fileOut) {
    return {
        name: 'copy-and-watch',
        async buildStart() {
            this.addWatchFile(fileIn);
        },
        async generateBundle() {
            this.emitFile({
                type: 'asset',
                fileName: fileOut,
                source: fs.readFileSync(fileIn)
            });
        }
    }
}

마지막 두 시
1) 이런 플러그인을 작성할 수 있는 구축 갈고리가 많다.비록 많은 사람들이 이 일을 할 수 있지만, 그들이 구축하는 과정에서 특정한 의미를 알지 못하는 상황에서 이 일에 적합한 것을 선택하는 것은 매우 어렵다.이 방면에서, 총결산 문서는 사람들로 하여금 두려워하게 할 수도 있다.인터넷상에서 유사한 플러그인을 쉽게 찾을 수 있는데, 그들은 자주 load 갈고리를 사용하여 파일을 관찰자에게 분배한다.나는 load 갈고리가 이런 상황에서 나쁜 선택이라고 생각한다. 왜냐하면 가져온 파일마다 이 갈고리를 호출하기 때문이다.반대로, 우리는 구축 과정이 시작될 때watcher에 파일을 한 번만 추가하는 것이 낫다.
2) 디스크에서 파일을 읽으려면 fs 모듈을 사용합니다.나도 같은 모듈로 디스크를 쓸 수 있다.사실 이런 방법은 많은 해결 방안이 존재할 뿐만 아니라 효과도 매우 좋다.그러나 Rollup의 실용 함수this.emitFile를 사용하는 것이 더 적합하다. 왜냐하면 파일을 Rollup에 다시 써서 자신의 방식으로 구축 과정을 완성하는 것을 제어할 수 있기 때문이다.