一,koa的热加载配置
1,nodemon热加载中间件
它会去监听js代码的变化,从而重启服务器,而不需要再人为地手动区重启服务器了。
https://www.npmjs.com/package/nodemon
2,开发过程中安装这个依赖
npm install -D nodemon
3,使用nodemon来启动服务器代码
npx命令等价于node node_module/bin 就是运行这个目录下地文件。
看黄色的字可以知道,这里已经开始使用这个nodemon来监听js代码了。
当我改动js文件的时候,它就会自动运行了。不需要手动再修改一遍。
4,更改package.json的脚本,让script来运行服务器
于是,这个服务器,就可以使用npm run start来运行了。
二,配置webpack,让我们的项目能够使用es6的语法
1,安装webpack。webpack4.0之后,webpack和webpack cli已经独立了,所以都要安装
npm install -D webpack webpack-cli
2,新建webpack.config.js文件作为webpack的配置文件
npm install -D clean-webpack-plugin webpack-node-externals @babel/core @babel/preset-env babel-loader cross-env
编写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,新建.babelrc,然后配置
{
"presets": [
[
"@babel/preset-env",
{
"targets":{
"node":"current"
}
}
]
]
}
然后运行npx webpack 就可以打包成功
4,这时候,就可以使用es6语法
npm install --save-dev @babel/node
如果不用webpack打包,而是直接写成es6的语法,就需要安装这个:
改写成es6语法:
运行项目:
npx babel-node src/index.js
如果想要热加载,就这样写:
npx nodemon --exec babel-node src/index.js
使用package.json来写就是:
"scripts": {
"start": "nodemon src/index.js",
"start:es6":"nodemon --exec babel-node src/index.js"
},