CODEWITHSUNDEEP
node.jsbabeljsnpm-scriptspnpm
user1019696
user1019696

Reputation: 463

npm script: browser opened using node, but not using babel

Early days in the development of my first npm script, and struggling somewhat. I'm on Ubuntu LTS with the latest nvm, node, npm and pnpm releases.

Node + npm have been installed using nvm, pnpm installed using npm, and several modules installed locally (i.e. without the -g flag) using pnpm. No sudo was necessary. The resulting package.json:

{
  "name": "javascript-development-environment",
  "version": "1.0.0",
  "description": "JavaScript development environment cobbled together using various online sources",
  "scripts": {
    "prestart": "./node_modules/.bin/babel buildScripts/startMessage.js",
    "start": "./node_modules/.bin/babel buildScripts/srcServer.js"
  },
  "author": "Laird o' the Windy Waas",
  "license": "MIT",
  "dependencies": {
    "@babel/polyfill": "^7.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "chalk": "^2.4.1",
    "express": "^4.16.4",
    "open": "^0.0.5",
    "path": "^0.12.7"
  }
}

With only Firefox 60.0.1 installed, on doing a 'pnpm start' using node, a browser window is opened "Hello World!" displayed, and terminal control has to be regained using a CTRL-C. -> All ok.

If I substitute in babel using the path as shown above (which results from the same issues described in this post), the buildScripts code is echoed to the terminal, but no browser window opens, and terminal control is released immediately on completion. The npm debugger provides no useful feedback. -> Something not working..

As the "Hello World!" code is traversed correctly using node (and remains unchanged for the babel traversal), it is not the source of the problem.

Here my babel config files:

.babelrc

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

babel.config.js

const presets = [
      [
        "@babel/env",
        {
          targets: {
            edge: "17",
            firefox: "61",
            chrome: "67",
            safari: "11.1",
            opera: "56"
          },
          useBuiltIns: "usage"
        },
      ],
    ];

    module.exports = { presets };

The problem looks to be that babel is not passing the transpiled code on to nodejs / express. Bound to be something simple, but I'm just going round in circles..

One thing I found myself asking is whether there might be a conflict between the various env presets across .babelrc, babel.config.js and package.json. Successive parking of the .babelrc and babel.config.js files, however, brought no change/advance.

I have also noticed that both (nvms) node and (ubuntus) nodejs are currently installed:

$ which node
/home/<myusername>/.nvm/versions/node/v10.13.0/bin/node

$ which nodejs
/usr/bin/nodejs

However, as everything to do with node and npm was installed using nvm, this shouldn't be a problem.

I could, I suppose, try installing babel globally, but with this widely frowned apon. I'd prefer a solution reflecting 'best practice'.

Thanks for any suggestions.

Upvotes: 0

Views: 302

Answers (1)

user1019696
user1019696

Reputation: 463

In earlier years, tutor material suggested babel-node would start npm / node (and hence express) on the user's behalf.

babel-node now no longer seems to be recognised. Attempts at using the babel-node command failed, and simply using node in it's place resulted in the transpiler output being dumped to the terminal.

babel, (in our case) pnpm, and node now have to be explicitly called, the latter referencing the transpiled code. node appears to handle interfacing with express.

After some experiment, therefore, the following changes (in package.json) appear to work fine:

  "scripts": {
    "prestart": "./node_modules/.bin/babel buildScripts/startMessage.js -d dist",
    "build": "./node_modules/.bin/babel buildScripts/srcServer.js -d dist",
    "start": "pnpm run build && node dist/startMessage.js && node dist/srcServer.js"
  },

These result both in a tidy console output and result in "Hallo World!" being displayed in a freshly opened browser window.

Just hope this is of use to someone else.. ;-)

Upvotes: 1

Related Questions