koa热加载使用ES6语法,报错$ node src/index.js internal/process/esm_loader.js:74 internalBinding(‘errors‘).

报错图片如下:
在这里插入图片描述

解决方法:
分析:使用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

记录一下!!
少走弯路!

猜你喜欢

转载自blog.csdn.net/weixin_46409887/article/details/127765481