Npm

From bibbleWiki
Jump to navigation Jump to search

Setting up Babel with VS code and express

Create a project

 mkdir project1
 cd project1
 npm init
 mkdir src
 mv index.js src/

Create .babelrc

{ "presets": ["@babel/preset-env"] }

Sample packages.json

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "babel-node src/index.js",
    "debug": "babel-node debug src/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-core": "^7.0.0-bridge.0"
  },
  "dependencies": {
    "@babel/node": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "babel-register": "^6.26.0",
    "express": "^4.17.1",
    "nodemon": "^1.19.4"
  }
}

And for vscode .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "autoAttachChildProcesses": true,
            "program": "${workspaceFolder}/src/index.js",
            "console": "internalConsole",
            "runtimeArgs": ["--nolazy", "--require", "@babel/register"],
            "env": {
                "BABEL_ENV": "debug",
                "NODE_ENV": "debug"
            },
            "skipFiles": ["node_modules/**/*.js", "<node_internals>/**/*.js"]
        }
    ]
}

Useful commands

List the packages at depth

 npm list --depth 0

New Babel 7 Project

 mkdir project1
 mkdir project1/src
 cd project1
 npm init
 npm install --save-dev @babel/core
 npm install --save-dev @babel/cli
 npm install --save-dev @babel/preset-env

Create in the root .babel.rc

 {
   "presets": ["@babel/preset-env"]
 }
</html>
Create src/index.js
<source>
 import express from "express";
 const app = express();
 
 app.use("/", (req, res) => {
   res.status(200).send("Hello World");
 });
 
 app.listen(3000);
 
 console.log("Server running at http://localhost:3000/");
 
 export { app as default };

Make the package.json to look like this

{
  "name": "rest-api3",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon src/index.js --exec babel-node"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3"
  },
  "dependencies": {
    "@babel/node": "^7.6.3",
    "express": "^4.17.1",
    "nodemon": "^1.19.4"
  }
}