바벨, nodemon 스크립트가있는 webpack?

Question

babel 및 nodemon을 사용하여 webpack을 구성하는 방법이 있는지 궁금합니다. 나는 웹을 꽤 많이 찾았지만 도움이되는 것은 아무것도 찾지 못했다. 아니면 도구를 만드는 데 새로운 것이기 때문에 나일지도 모른다.

"start": "nodemon app.js --exec babel-node" 

그것은 내 코드를 transpile도 변경이있는 경우 서버를 다시 시작 나는 나의 package.json에서이 스크립트가 있습니다. 시계 기능이있는 webpack과 같은 구성이 있는지 궁금합니다. webpack (서버를 실행하고 변경 사항을 확인한 후 바벨 투명화와 함께 다시 시작)으로 처리 할 수 ​​있습니까?

Answer 1

nodemon을 사용할 필요가 없으며 webpack's watch feature을 사용할 수 있습니다.

여기 예제 스크립트입니다, 이제 backend-dev.js를 호출하자 : 당신이 당신의 서버 코드에서 변경하면

const path = require('path'); 
const webpack = require('webpack'); 
const spawn = require('child_process').spawn; 

const compiler = webpack({ 
    // add your webpack configuration here 
}); 
const watchConfig = { 
    // compiler watch configuration 
    // see https://webpack.js.org/configuration/watch/ 
    aggregateTimeout: 300, 
    poll: 1000 
}; 

let serverControl; 

compiler.watch(watchConfig, (err, stats) => { 
    if (err) { 
     console.error(err.stack || err); 
     if (err.details) { 
      console.error(err.details); 
     } 
     return; 
    } 

    const info = stats.toJson(); 

    if (stats.hasErrors()) { 
     info.errors.forEach(message => console.log(message)); 
     return; 
    } 

    if (stats.hasWarnings()) { 
     info.warnings.forEach(message => console.log(message)); 
    } 

    if (serverControl) { 
     serverControl.kill(); 
    } 

    // change app.js to the relative path to the bundle created by webpack, if necessary 
    serverControl = spawn('node', [path.resolve(__dirname, 'app.js')]); 

    serverControl.stdout.on('data', data => console.log(data.toString())); 
    serverControl.stderr.on('data', data => console.error(data.toString())); 
}); 

당신은

node backend-dev.js 

과 명령 행에서이 스크립트를 시작할 수 웹팩 다시 컴파일합니다 서버를 다시 시작하십시오.

Answer 2

바벨 부분에 대해서는 babel loader이 적용됩니다. 내 webpack.config.js (웹팩 2)에서이를 사용

module: { 
    ... 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: {presets: ['es2015']} 
    } 
    ] 
} 

하지만 난 그냥 반 답변을, 그래서 미안 nodemon 사용하지 마십시오. 나는 webpack-dev-server를 개발 중에 사용한다. 및 준비/생산 PM2는 내가 수동으로 무언가를 다시 시작할 필요가 없습니다 그래서 준비하면서 볼 수있어 사용하고 있는데, 그것은 webpacks의 dito보다 구성하는 것이 훨씬 더 쉽다 :

// pm2's ecosystem.json (just to be thorough): 
"watch"  : "./", 
"ignore_watch" : "node_modules", 

하지만 생산 없음 시계, 아니 안돼, 나, 더럽지 마 - 잘못 될 수있는 것들이 적다.