Webpack에서 jsHint 두 개의 다른 폴더를 만드는 방법은 무엇입니까?

Question

간단히 말해 빌드 프로세스 중에 패키지 소스와 병렬로 테스트 스펙을 jshint해야합니다.

Webpack 3을 사용하여 파일을 두 개의 다른 .jshintrc 파일이있는 두 개의 다른 폴더에주의해야합니까? .jshintrc의 소스 팩은 ./src 폴더에 있으며 배포판 끝에 번들로 제공되고 .jshintrc의 다른 팩은 ./test 폴더에 있습니다.이 폴더는 Webpack config (Karma에서 처리)에 언급되어 있지 않습니다.

다음 두 가지 방법을 시도했으며 모두 ./src 만 처리 했으므로 ./test으로 아무 것도하지 않았습니다. 웹팩 설정의 첫 번째 버전 :

entry: { 
    'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'), 
    'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js') 
},  
module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     options: { presets: ['es2015'] } 
     }, 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     include: path.resolve(__dirname, '../src'), 
     use: [{ loader: 'jshint-loader' }] 
     }, 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     include: path.resolve(__dirname, '../test'), 
     use: [{ loader: 'jshint-loader' }] 
     } 
    ] 
}, 
// ... 

웹팩 설정의 두 번째 버전은 모듈 규칙 부분에서 다릅니다

module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     options: { presets: ['es2015'] } 
     }, 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     include: [ 
      path.resolve(__dirname, '../src'), 
      path.resolve(__dirname, '../test') 
     ], 
     use: [{ loader: 'jshint-loader' }] 
     } 
    ] 
}, 
// ... 

을하지만 말했듯이 작동하지 않습니다. 전체 구성/소스는 this repository에서 얻을 수 있습니다. 그래서 내 접근법을 수정하는 것이 가능합니까? 아니면 전혀 다른 것을 시도해야합니까?

Answer 1

몇 가지 연구를 통해 상황을 두 부분으로 나눠서이 문제를 해결할 수있었습니다. 제작 빌드 중 jshinting 테스트 (한 번만 배포판에 있음)와 개발 프로세스 중에 (보기 모드에서는 배포판이 기억).

1. 생산 체제. jshit은 한 번만 실행해야하기 때문에 매우 간단합니다. 고궁 박물원 패키지에 종속성으로 jshint를 추가 한 후 -

npm install --save-dev jshint 

는 빌드 스크립트 앞에 추가 할 수 - prod-build 및 prod-test 프로세스의

"hint-tests": "jshint --verbose test", 
"build": "npm run hint-tests && npm run prod-build && npm run prod-test" 

없음에 대한 jshint를 알 수 없습니다.

2. 개발.이 솔루션은 glob를 통해 새로운 진입 점을 추가하는 것입니다

entry: { 
    'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'), 
    'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js') 
    'test': glob.sync(path.resolve(__dirname, 'test/*.js')) // development only! 
} 

그렇지 않으면 당신은 분배 폴더에 별도의 번들을 얻을 것이다 단지 개발 환경을 위해 수행해야

. 그래서 우리는 그것을 기억합니다. 추가 번들링으로 인해 dev 프로세스에 약간의 영향을 미치지 만, 차이점은 인 메모리에서만 발생하기 때문에 중요하지 않습니다. 그런 다음 jshint-loader를 사용하는의는 웹팩 설정의 모듈 부분을 하나 더 규칙을 추가 할 수 있습니다 :

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     options: { presets: ['es2015'] } 
    }, 
    { // this is both for prod and dev environments 
     enforce: 'pre', 
     test: /\.js$/, 
     include: path.resolve(__dirname, 'src'), 
     use: [{ loader: 'jshint-loader' }] 
    }, 
    { // this is only for dev environment 
     enforce: 'pre', 
     test: /\.js$/, 
     include: path.resolve(__dirname, 'test'), 
     use: [{ loader: 'jshint-loader' }] 
    } 
    ] 
} 

이 Especialy는 dev에 서버 작업시 콘솔 출력에 너무 많은 로그, 할 수있다, 그래서 제한하는 것이 도움이 될 수 있습니다 stats 속성 통해 출력 :

stats: { 
    modules: false, 
    errors: true, 
    warnings: true 
    }