npm 脚本：使用节点打开的浏览器，但不使用 babel答案

【问题标题】：npm script: browser opened using node, but not using babelnpm 脚本：使用节点打开的浏览器，但不使用 babel
【发布时间】：2019-04-28 16:05:54
【问题描述】：

在开发我的第一个 npm 脚本的早期，有些挣扎。我在 Ubuntu LTS 上使用最新的 nvm、node、npm 和 pnpm 版本。

Node + npm 已经使用 nvm 安装，pnpm 使用 npm 安装，并且几个模块在本地安装（即没有 -g 标志）使用 pnpm。不需要 sudo。生成的 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"
  }
}

仅安装了 Firefox 60.0.1，在使用 node 执行“pnpm start”时，会打开一个浏览器窗口“Hello World！”显示，并且必须使用 CTRL-C 重新获得终端控制。 -> 一切正常。

如果我在 babel 中替换使用如上所示的路径（这是由this post 中描述的相同问题导致的），buildScripts 代码会回显到终端，但不会打开浏览器窗口，终端控制在完成后立即释放。 npm 调试器没有提供有用的反馈。 -> 有些东西不工作..

作为“Hello World！”代码使用节点正确遍历（并且对于 babel 遍历保持不变），它不是问题的根源。

这是我的 babel 配置文件：

.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 };

问题似乎是 babel 没有将转译的代码传递给 nodejs / express。一定会很简单，但我只是在兜圈子..

我发现自己要问的一件事是，.babelrc、babel.config.js 和 package.json 的各种环境预设之间是否可能存在冲突。然而，.babelrc 和 babel.config.js 文件的连续停放并没有带来任何变化/进步。

我还注意到当前安装了（nvms）节点和（ubuntus）nodejs：

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

$ which nodejs
/usr/bin/nodejs

但是，由于与 node 和 npm 相关的所有内容都是使用 nvm 安装的，因此 shouldn't be a problem。

我想，我可以尝试installing babel globally，但要使用这个广受蹂躏的围裙。我更喜欢反映“最佳实践”的解决方案。

感谢您的任何建议。

【问题讨论】：

标签： node.js babeljs npm-scripts pnpm

【解决方案1】：

在早些年，导师材料建议babel-node 将代表用户开始npm / node（因此express）。

babel-node 现在似乎不再被识别。尝试使用babel-node 命令失败了，只是在它的位置使用节点导致转译器输出被转储到终端。

babel、（在我们的例子中）pnpm 和 node 现在必须显式调用，后者引用转译的代码。 node 似乎可以处理与 express 的接口。

因此，经过一些实验，以下更改（package.json）似乎可以正常工作：

  "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"
  },

这些都导致整洁的控制台输出和导致“你好世界！”正在新打开的浏览器窗口中显示。

只是希望这对其他人有用.. ;-)

【讨论】：