报错图片如下:
解决方法:
分析:使用babel语句可以解决es6运行单个js文件,babel import语法 js_通过 babel-node 运行 ES6
解析:错误[ERR_MODULE_NOT_FOUND]:找不到模块
目前是版本较高的问题,我是通过降低版本解决了。
package.json
{
"name": "koa-cros",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon src/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@koa/cors": "^3.0.0",
"koa": "^2.7.0",
"koa-body": "^4.1.0",
"koa-combine-routers": "^4.0.2",
"koa-helmet": "^4.2.0",
"koa-json": "^2.0.2",
"koa-router": "^7.4.0",
"koa-static": "^5.0.0"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^5.2.0",
"nodemon": "^1.19.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-node-externals": "^1.7.2"
}
}
1.解决方法:尝试降低版本@babel/core @babel/node
@babel/preset-env
2.node的版本号如果是低版本,这个下载babel下的依赖就不能太高版本。
成功图片:
全部代码:
src/api/a.js
// 正常项目中书写方式
// function a(ctx){
// ctx.body={}
// }
// module.exports={
// a
// }
//...代码省略写法
//初始message:'hello from a'
//修改后messsage:'hello from a!!!'
//修改后的数据页面已更新 --启动localhost:3000/a
module.exports=function(ctx){
ctx.body={//开发过程中的热加载 修改代码后重新启动
"message":"hello from a!!!"
}
}
src/api/b.js
module.exports=function(ctx){
ctx.body={
"message":"hello from b"
}
}
src/routes/aRouter.js
const Router= require ('koa-router')
//引用a模块
const a=require('../api/a')
const router=new Router()
router.get('/a',a)
module.exports=router
src/routes/bRouter.js
const Router= require ('koa-router')
//引用a模块
const b=require('../api/b')
const router=new Router()
router.get('/b',b)
module.exports=router
src/routes/routes.js
//合并操作 可以对页面上所有的router进行组合
const combineRoutes = require('koa-combine-routers')
//路由
const aroutes=require('./aRouter')
const broutes=require('./bRouter')
// import combineRoutes from 'koa-combine-routers'
// import aroutes from '../routes/aRouter'
// import broutes from '../routes/bRouter'
module.exports=combineRoutes(//路由拼装
aroutes,
broutes
)
src/index.js
// koa 主文件 index.js 引用
//引入图片 需要使用到path路径模块
// const koa= require('koa')
// const path= require('path')
// const helmet = require('koa-helmet')//安全头部信息加入项目
// const statics= require('koa-static')//中简介 传递路径是一个绝对路径
//routes
// const router= require('./routes/routes')
import koa from 'koa'
import path from 'path'
import helmet from 'koa-helmet'
import statics from 'koa-static'
import router from './routes/routes'
const app =new koa()
app.use(helmet())
//当前工作目录 、引入地址
app.use(statics(path.join(__dirname,'../public')))//放入图片
app.use(router())
//端口
app.listen(3000)
//开发koa路由的时候,
//需要按照功能模块进行区分方便路由的定义以及文件夹的区分,
//用到了路由压缩koa-rputers
//静态资源koa-static 需要注意的是中简介的使用需要用到path模块 并且传递到中简介的是一个绝对路径
console.log("ok");
//2.部分 koa配置开发热加载 es6语法支持webpack配置
//nodemon 简单的监视一个脚本的变化 在js发生变化的时候会重启服务
//使用步骤npm install -g nodemon
//npm install --save-dev nodemon
//开发过程中的依赖包 npm install -D nodemon
//使用方法启动node服务,了解客户端的请求加载数据的过程。
//3.可以改写src为ES6语法了
// export default routers
创建的文件.babelrc
.babelrc
{
"presets": [ ["@babel/preset-env",
{
"targets":{
"node":"current"
}
}
]
]
}
webpack.config.js
// 入口文件
// 项目支持ES6语法 需要配置webpack webpack-cli脚手架
// 项目中使用ES6新的特性
// webpack4 (webpack webpack-cli已经成为2个)
//npm install -D clean-webpack-plugin 清除dist目录下的一些文件
//webpack-node-externals针对node_modules文件做一个排除处理 就不会处理node_modules文件了
// 调试用到的babel/core babel/node babel/preset-env:对一些新的特性做一些新的支持
//babel-loader webpack使用的loader
//cross-env设置环境变量
const path = require('path')
//去排除不会选到的模块
const nodeExcternals=require('webpack-node-externals')
//更新使用方式
const { CleanWebpackPlugin }=require('clean-webpack-plugin')
const webpackconfig={
target:'node',
mode:'development',
entry:{//
server:path.join(__dirname,'./src/index.js')
},
output:{
filename:'[name].bundle.js',
path:path.join(__dirname,'./dist')
},
//方便调试 打开devtool
devtool:'eval-source-map',
module:{
rules:[
{//正则匹配js jsx 内容
test:/\.(js|jsx)$/,
use:{
loader:'babel-loader'
},
//排除在外的
exclude:[path.join(__dirname,'/node_modules')]
}
]
},
externals:[nodeExcternals()],
plugins:[
new CleanWebpackPlugin()
],
node:{
console:true,
global:true,
process:true,
Buffer:true,
__filename:true,
__dirname:true,
setImmediate:true,
path:true
}
}
// 了解webpack 打印webpack是否和想要设置的是否一致 console.log(webpackconfig)
//node.js webpack 配置开发热加载
//3.npm 打包 npm install -g npm-check-updates 依赖包
//安装npm-check-updates 运行ncu --help命令去查看cli脚手架命令工具
//ncu命令可以查看那些需要更新的依赖包 更新
module.exports=webpackconfig
记录一下!!
少走弯路!