[laavel] laavel mix의 웹 패키지.mix.js의 개작을 생략하고 싶습니다!

초서:2021/13
laravel : v8.21.0
php : 7.4.14
연결용 링크: 일반 PHP만 만나보신 분들은 laavel-Qita를 만져보세요.
before -> [laravel] laravel mix를 사용해 보도록 하겠습니다.

전언

저번에 laavel mix(?) 한번 왔어요.더듬어 보다.그래서 한 가지 생각이 있습니다.
"파일을 생성할 때마다 웹 페이지 pack.min.js를 덮어써야 합니까?"
답은 아마 yes일 거예요. 조금만 조사해도 나오지 않을 거예요. 아마 그럴 거예요.
이럴 때 사용하는 방법이 틀릴 수도 있지만, 틀린 것에 주의하려면 다른 사람에게 물어볼 수밖에 없다
이런 일, 웹 패키지.min.js 파일을 자동으로 추가합니다.

파일 목록 가져오기

방법은 매우 간단하다.폴더 안의 파일을 가져와 순서대로 믹스에 던지면 됩니다.
그래서 우선 서류 일람표를 구해보자.
webpack.min.js의 실행 환경은 node이기 때문에 node로 검색합니다.
Node.js로 파일 일람 fs를 빠르게 가져옵니다.readdir의 withFileType 옵션 - Qiita fs사용하면 되나요?
따라서 이번에는 fs.readdir의 withFileTypes 옵션을 사용한 판정 방법에 기술된 showFiles 함수를 직접 빌려씁니다.아니오, 좀 불편한 점이 있어요. 거기만 고칠게요.
webpack.min.js

const showFiles = (dirpath, callback, adddirpath = "") => {
    const dirents = fs.readdirSync(dirpath, { withFileTypes: true });

    for (const dirent of dirents) {
        const fp = path.join(dirpath, dirent.name);
        if (dirent.isDirectory()) {
            showFiles(fp, callback, adddirpath + "/" + dirent.name);
        } else {
            callback(fp, adddirpath);
        }
    }
};

매개 변수adddirpath의 추가와 동기화 처리.adddirpath 이전 계층의 상대 위치를 유지합니다.
잠시 후 사용하는mix 함수가 동기화되지 않으면 동기화가 순조롭지 않기 때문이다.

믹스에게 던지다

단순히 던지면 오류가 발생합니다.
상태를 변수로 저장하고 순서대로 호출하는 방법을 취한다.
webpack.min.js

let mixvar = mix;
dirlist.forEach((e) => {
    showFiles("resources/" + e.type, (filename,adddirpath) => {
        mixvar = mixvar[e.type](filename, "public/" + e.dir + adddirpath);
    });
});

좀 귀찮은 일을 했기 때문에 순서대로 설명하겠습니다.
먼저 ShowFiles의 첫 번째 매개변수는 cssresources/css 형식의 값입니다.이따가 쓸게요.
두 번째 인자는 파일 이름이 호출 함수입니다.
호출 함수에서 이전에 준비한mixver 함수를 호출합니다.그러나 확장명에 따라 구분해야 하기 때문에 단순히 mix.css나 mix.js처럼 쓸 수는 없다.따라서 진열 형식mix[css] 또는mix[js]의 형식으로 호출된다.이렇게 해도 js의 장점이라고 말할 수 있다.
매개변수는 일반적으로 원본 파일 이름과 출력 디렉토리입니다.showFiles에 adddirpath를 추가했다. 예를 들어 resources/css/auth/auth.css의 출력 목적지public/css/auth/auth.css는 등급을 동일하게 하기 위해 기록했다.
이렇게 간단하게 설명했는데 관건은 dirlist(e)의 설명이다.
설정의 예는 이런 느낌이다.
webpack.min.js

const dirlist = [
    { type: "css", dir: "css" },
    { type: "less", dir: "css" },
    { type: "js", dir: "js" },
    { type: "ts", dir: "js" },
];

dirlist 대상 자체는 수조이고 하나의 원소는type과dir원소이다.type는 resources 내의 폴더 이름 겸 확장자입니다.따라서 확장자와 폴더 이름이 일치하지 않을 때 다시 써야 합니다.dir는 public 내의 폴더 이름입니다.수출 지점.
이 대상은 자신이 사용하는 언어의 수를 늘리거나 줄일 수 있다.

완성

다 된 전선은 여기 있다.
webpack.min.js

const mix = require("laravel-mix");
const fs = require("fs");
const path = require("path");
const dirlist = [
    { type: "css", dir: "css" },
    { type: "less", dir: "css" },
    { type: "js", dir: "js" },
    { type: "ts", dir: "js" },
];
const showFiles = (dirpath, callback, adddirpath = "") => {
    const dirents = fs.readdirSync(dirpath, { withFileTypes: true });
    for (const dirent of dirents) {
        const fp = path.join(dirpath, dirent.name);
        if (dirent.isDirectory()) {
            showFiles(fp, callback, adddirpath + "/" + dirent.name);
        } else {
            callback(fp, adddirpath);
        }
    }
};
let mixvar = mix;
dirlist.forEach((e) => {
    showFiles("resources/" + e.type, (filename,adddirpath) => {
        mixvar = mixvar[e.type](filename, "public/" + e.dir + adddirpath);
    });
});
mixvar.version(); // 任意

이렇게 되면 파일을 늘려도 (언어를 늘리면 별론이다) 특별히 다시 쓸 필요가 없고 컴파일할 수 있다.

끝맺다

그나저나 laavel mix가 실행되면 모든 파일을 다시 컴파일합니까?그런 일 없어요?
더 찾아볼까

기타 참조 사이트

특정 디렉터리에 속하는 파일만 가져오기 (또는 디렉터리만 가져오기) (Node.jsv10.10 이후 버전) - Qita