大前端學習第三課：koa項目熱更新和es6語法兼容

這節課學會了一些關於koa項目的熱更新和如何使用webpack讓node支持import等es6語法。

目錄

1. 熱更新
2. es語法支持

熱更新

熱更新很簡單，須要使用到nodemon。

用法以下：

npm i nodemon -D

// package.json
"scripts": {
    "start": "nodemon src/index.js"
  },
複製代碼

而後運行npm run start

es語法支持

這裏須要用到以下插件：

1. webpack & webpack-cli
2. clean-webpack-plugin: 清除dist目錄
3. webpack-node-externals: 不對node_modules進行處理
4. @babel/core: es6支持
5. @babel/node: 調試使用
6. @babel/preset-env: 新語法的支持
7. babel-loader
8. 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"
  },
複製代碼

---

我是海明月，前端小學生。