시계는 웹팩

Question

로 건설되고 난 다음 디렉토리 구조를 가지고 : 나는 app에 component-library을 연결하는 lerna을 사용했다

application 
      | 
      |__ component-library 
      | 
      |__src 
      | 
      |__ app 
      | 
      |__src 

합니다.

분에 나는 component-library의 컴파일 된 출력에 연결됩니다.

어떻게 든 재 컴파일이 발생할 구성 요소 라이브러리 폴더의 변경 사항을 수신 대기하려고합니다.

꿀꺽 거리는 소리를 사용해야합니까?

Answer 1

lerna 대신 원사 작업 공간을 사용하지만 기본적으로 lerna의 --hoist 옵션이 기본적으로 동일합니다.

난 당신이 component-library의 package.json의 prepare script 셋업을 가지고, 당신은 true로 설정 watch 옵션을 application의 루트에서 웹팩을 시작 (또는 webpack-dev-server을 사용하는) 개발 중에 있다고 가정하겠습니다

app은 component-library의 모듈을 package.json에 종속성으로 나열합니다 (즉, 모듈 가져 오기/가져 오기 중에 상대 경로를 사용하지 않음). component-library.

어떻게 든 구성 라이브러리 폴더 의 변경 사항을 수신 대기하므로 재 컴파일이 발생합니다.

꿀꺽 거리는 소리를 사용해야합니까?

component-library에서 파일 변경 사항을 확인하려면 유틸리티가 필요하지만 반드시 할 수는 있습니다. component-library의 파일이 바뀌면 스크립트를 다시 실행하여 패키지를 다시 게시하면 webpack은 종속성 그래프의 모듈이 변경된 것을 확인하고 루트 application을 다시 작성합니다 (개발 설정에 따라 브라우저를 다시로드 할 수 있음).). webpack은 개발 소스 코드가 아닌 종속 그래프에 component-library 빌드를 가지고 있기 때문에 다시 작성/게시하지 않고 component-library의 파일을 보는 것만으로 충분하지 않습니다.

이 같은 보일 수 있습니다 시계 작업을 꿀꺽 사용하고자하는 경우 : 인해 변경 모듈을 볼 수 있고 루트 application를 다시 할 lerna 심볼릭 링크의 웹팩의 watch 옵션

import gulp from 'gulp'; 
import { spawn } from 'child_process'; 

gulp.watch('path/to/component-library/src/*.js',() => { 
    let prepare = spawn('yarn', ['run', 'prepare'], { 
     cwd: 'path/to/component-library', 
     stdio: 'inherit' 
    }); 

    prepare.on('exit', (code) => { 
     if (code !== 0) { 
      prepare.emit('end'); 
     } 
    }); 

    // gulp 4 allows returning a child process to signal async completion 
    return prepare; 
}); 

합니다.