One, koa's hot reload configuration
1. Nodemon hot-loading middleware
It will monitor the changes of the js code, thereby restarting the server, instead of manually restarting the server manually.
https://www.npmjs.com/package/nodemon
2. Install this dependency during development
npm install -D nodemon
3. Use nodemon to start the server code
The npx command is equivalent to node node_module/bin to run the files in this directory.
Looking at the yellow words, you can know that this nodemon has been used here to monitor js code.
When I change the js file, it will run automatically. No need to manually modify it again.
4. Change the script of package.json and let the script run the server
Therefore, this server can be run using npm run start.
Second, configure webpack so that our project can use es6 syntax
1. Install webpack. After webpack4.0, webpack and webpack cli have been independent, so they must be installed
npm install -D webpack webpack-cli
2. Create a new webpack.config.js file as the webpack configuration file
npm install -D clean-webpack-plugin webpack-node-externals @babel/core @babel/preset-env babel-loader cross-env
Write the configuration of webpack.config.js
const path=require('path')
const nodeExcternals=require('wepack-node-externals') //排除一些我们不会使用到的node模块
const {
CleanWebpackPlugin}=require('clean-webpack-plugin') //帮助我们删除旧的文件(如修改了图片文件夹名字后打包，旧打包处的文件夹还在)，然后在进行打包。
const webpackconfig={
target:'node',
mode:'development',
entry:{
srever:path.join(__dirname,'src/index.js')
},
output:{
filename:'[name].bundle.js', //打包出口的文件名字，原有名字.bundle.js
path:path.join(__dirname,'./dist')
},
// devtools:'eval-source-map', //方便后期调试的
module:{
rules:[
{
test: /\.(js|jsx)$/,
use:{
loader:'babel-loader' //匹配到js文件，就使用babel来处理
},
exclude:[path.join(__dirname,'/node_modules')] //排除这个文件夹下的js文件
}
]
},
externals:[nodeExcternals()], //排除一些我们不会使用到的node模块
plugins:[
new CleanWebpackPlugin()
],
// node:{
// console:true,
// global:true,
// process:true,
// Buffer:true,
// __filename:true,
// __dirname:true,
// setImmediate:true,
// path:true
// }
}
module.exports=webpackconfig
3. Create a new .babelrc and configure
{
"presets": [
[
"@babel/preset-env",
{
"targets":{
"node":"current"
}
}
]
]
}
Then run npx webpack to package successfully
4. At this time, you can use es6 syntax
npm install --save-dev @babel/node
If you do not use webpack to package, but write directly into es6 syntax, you need to install this:
rewrite into es6 syntax:
run the project:
npx babel-node src/index.js
If you want to hot reload, just write:
npx nodemon --exec babel-node src/index.js
To write using package.json is:
"scripts": {
"start": "nodemon src/index.js",
"start:es6":"nodemon --exec babel-node src/index.js"
},