i am building a node.js api. I want to use some latest ecmascript features. But during production i need a built/dist version that will run on the lts node version.
Problems:
-
I have setup webpack and babel for this but im not sure if im duplicating stuff by having webpack & babel in seperate configuration files.
-
My goal is to have a setup that builds on changes and the node server restarts on changes. This does not need to be the case for production i just need a built version. Do i need seperate webconfigs for this? Right now i have a webpack plugin that after build it runs nodemon this works well for dev but dont need for production.
-
Trying to debug errors using my setup is difficult i believe the sourcemaps are not setup properly. So the errors always point to dist/index.js which is a long file of compiled code.
package.json
{ "name": "backend-blue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "serve": "webpack --watch", "build": "webpack", "quality": "./node_modules/.bin/eslint src/", "test": "nyc mocha --timeout 5000 test/**/*.test.js --exit" }, "nyc": { "require": [ "@babel/register" ], "reporter": [ "lcov", "text" ], "sourceMap": false, "instrument": false }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^6.2.0", "express": "^4.16.4", "express-validator": "^5.3.1", "mongoose": "^5.4.15", "morgan": "^1.9.1", "passport": "^0.4.0", "passport-jwt": "^4.0.0", "response-time": "^2.3.2", "uuid": "^3.3.2", "winston": "^3.2.1" }, "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.3.3", "@babel/plugin-proposal-class-properties": "^7.3.3", "@babel/plugin-transform-runtime": "^7.2.0", "@babel/preset-env": "^7.3.1", "@babel/register": "^7.0.0", "@babel/runtime": "^7.3.1", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.5", "babel-plugin-istanbul": "^5.1.1", "babel-plugin-transform-regenerator": "^6.26.0", "babel-polyfill": "^6.26.0", "chai": "^4.2.0", "clean-webpack-plugin": "^1.0.1", "cross-env": "^5.2.0", "eslint": "^5.14.1", "eslint-config-google": "^0.12.0", "eslint-loader": "^2.1.2", "eslint-plugin-react": "^7.12.4", "mocha": "^6.0.1", "nyc": "^13.3.0", "supertest": "^3.4.2", "webpack": "^4.29.5", "webpack-cli": "^3.2.3", "webpack-node-externals": "^1.7.2", "webpack-shell-plugin": "^0.5.0" } }
webpack.config.js
const path = require("path"); const WebpackShellPlugin = require("webpack-shell-plugin"); const nodeExternals = require("webpack-node-externals"); const CleanWebpackPlugin = require("clean-webpack-plugin"); module.exports = [ { mode: "development", entry: ["babel-polyfill", "./src/index.js"], target: "node", externals: [nodeExternals()], // in order to ignore all modules in node_modules folder stats: { colors: true }, devtool: "source-map", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", sourceMapFilename: "index.js.map" }, module: { rules: [ { enforce: "pre", test: /\.js$ /, exclude: /node_modules/, loader: "eslint-loader", }, { test: /\.m?js$ /, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", { plugins: ["@babel/plugin-proposal-class-properties"] }] } } } ], }, node: { __dirname: false, __filename: false, }, "plugins": [ new CleanWebpackPlugin(), new WebpackShellPlugin({ onBuildStart: [], onBuildEnd: ["nodemon dist/index.js"] }), // new CopyWebpackPlugin([{ // from: 'src/public/', // to: 'public/' // }]), ] }, ];
.babelrc
{ "presets": [ "@babel/preset-env" ], "env": { "test": { "plugins": [ "istanbul" ] } }, "plugins": [ "@babel/transform-runtime", "@babel/plugin-proposal-class-properties" ] }
I am trying to achieve a node setup that allows me to use the latest ecmascript features, make code changes that automatically rebuild the project and restart server aswell as being able to debug errors. Finally being able to seperate development from production.