乐趣区

关于koa:koa项目热更新和es6语法兼容

热更新很简略,须要应用到 nodemon。

用法如下:

npm i nodemon -D
// package.json
"scripts": {"start": "nodemon src/index.js"},

而后运行 npm run start

es 语法反对
这里须要用到如下插件:

webpack & webpack-cli
clean-webpack-plugin: 革除 dist 目录
webpack-node-externals: 不对 node_modules 进行解决
@babel/core: es6 反对
@babel/node: 调试应用
@babel/preset-env: 新语法的反对
babel-loader
cross-env: 环境变量的解决

webpack.config.js 配置如下:

const path = require('path');
var nodeExternals = require('webpack-node-externals');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const webpackconfig = {
  target: 'node',
  mode: 'development',
  entry: {server: path.join(__dirname, 'src/index.js')
  },
  devtool: 'eval-source-map',
  output: {filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {test: /\/(js|jsx)$/,
        use: {loader: 'babel-loader'},
        exclude: [path.join(__dirname, '/node_modules')]
      }
    ],
    },
    externals: [nodeExternals()],
    plugins: [new CleanWebpackPlugin()
    ],
    node: {
      console: true,
      global: true,
      process: true,
      Buffer: true,
      __filename: true,
      __dirname: true,
      setImmediate: true,
      path: true
    }
  }
module.exports = webpackconfig

.babelrc 配置如下:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {"node": "current"}
      }
    ]
  ]
}

而后执行如下命令:

npx babel-node src/index.js

就能够应用 import 语法了。

当然,我还想联合应用热更新怎么办呢?

"scripts": {
    "start": "nodemon src/index.js",
    "start:es6": "nodemon --exec babel-node src/index.js"
  },

退出移动版