内容纲要
项目热更新
npm i nodemon -D
"scripts": {
"start": "nodemon app.js"
},
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"
},