如何使用 Node JS 设置 Babel 6 以在我的服务器端代码中使用 ES6？

Posted 2023-03-08

【中文标题】如何使用 Node JS 设置 Babel 6 以在我的服务器端代码中使用 ES6？

【英文标题】：How do I setup Babel 6 with Node JS to use ES6 in my Server Side code?

【发布时间】：2016-02-10 23:35:38

【问题描述】：

我已多次阅读以下网址提供的文档： Node API Babel 6 Docs

我开始按照通过示例教程学习 pg-promise 并希望使用 ES6 并使用 Babel 转换为 ES5，但我不确定一些事情：

安装 babel-core 后，我使用什么预设以及在哪里/如何配置它以使其工作？

文档不清楚我将哪个文件： require("babel-core").transform("code", options); 放入以及该代码的哪些部分是占位符.当我使用该代码时，我是否只在某个地方使用它一次，然后我可以在每个其他文件中使用 ES6？这将如何实现？

我阅读了这个 .babelrc 文件，并想确认实际文件名是“.babelrc”还是只是文件扩展名以及与我的项目的根目录相关的位置文件..以及如何链接到它？

如果我正在使用pg-promise，我应该使用 ES6 和 Babel 还是将运行：npm install 按照 Testing 部分中的描述进行 pg-promise 就足够了并尝试使用ES6 会带来更多问题吗？

如果在我的服务器端开发过程中出现需要，我希望利用 let 和 const。

是否有用于 node+babel+pg-promise 服务器设置的标准文件结构？

编辑 值得注意的是，我还阅读了 Node JS with Babel-Node 并看到应该避免使用它。由于类似的原因，最底部的最终答案对我来说真的没有意义，我在遵循 Babel 提供的实际文档时遇到了麻烦。

【参考方案1】：

@makeitsimple

步数：1

npm install nodemon --save

在项目目录中

步骤：2

yarn add babel-cli

yarn add babel-preset-es2015

步数：2 在 package.json-> scipts 中将 'start' 更改为以下

start: "nodemon src/server.js --exec babel-node --presets es2015"

步骤：3

yarn start

【参考方案2】：

这个答案使用这个简单的目录结构

project/server/src/index.js => 你的服务器文件

project/server/dist/ => babel 会将你的转译文件放在哪里

安装 babel 依赖

npm install -g babel nodemon

npm install --save-dev babel-core babel-preset-es2015

将这些 npm 脚本添加到您的 package.json 文件中

"scripts": "compile": "babel server/src --out-dir server/dist", "server": "nodemon server/dist/index.js

在你的项目根目录下创建一个 .babelrc 文件

"presets": "es2015"

转译你的目录

npm run compile

运行你的服务器

npm run server

【讨论】：

那么观看剧本的最佳方式是什么？

我不知道。当我对服务器进行更改时，我只需 ctrl-c 并重新运行 npm 脚本。

【参考方案3】：

1.a 需要什么预设？

您需要首先使用终端窗口（如命令提示符）在项目的根目录中使用npm install babel-core --save-dev 安装 Babel。

安装后，您需要使用npm install babel-preset-es2015 --save-dev 安装es2015 预设。 Babel-Core 是 Promises/A+ 兼容的，但不理想，因为错误处理很差，所以应该使用 Bluebird 等库来代替。为了转译，仍然需要安装 babel-core 并且 es2015 启用 ES6->ES5 转译，这样你就可以使用像 let 和 const 等花哨的东西。

1.b 把require("babel-core");放在哪里？

改为使用require("babel-core/register"); 并将其放在您的Entry 文件中，该文件通常称为“server.js”。 server.js 文件将需要独占使用 CommonJS (ES5)。

通过使用 "require" 语句，它会将所有相关转换应用于 Entry 文件中需要的所有代码以及这些文件中需要/包含的所有文件。

您指向 "main": 部分下 package.json 中的 Entry 文件。

Package.json 是在您使用终端窗口内项目根目录中的npm init 初始化项目时创建的

一种方法是：

入口文件

- server.js

server.js

- 需要 babel-core 和 ES6 主文件：config.js/jsx/es6/es

config.es6

- 使用 ES6 并包含（需要）所有其他也可以使用 ES6 的项目文件，因为它们通过加载到 "config" 文件中被转译正在被 babel-core 直接转译。

2。 .babelrc 是什么？

.babelrc 是文件名，应该和你的 package.json 文件放在同一个文件夹中（通常是根目录），并且在需要 babel-core 来确定哪些预设或插件时会自动“加载”将被使用。

在.babelrc 中，您需要添加以下代码：

  "presets": ["es2015"]

3。 pg-promise 测试部分

最近来自开发者的直接引用回答了这个问题

您无需担心测试中的步骤，只需使用安装中的步骤即可。测试中的一个与开发依赖项安装有关，以便运行测试。 pg-promise 可以与任何符合 Promises/A+ 规范的 Promise 库一起使用。

4。服务器端项目的标准文件/文件夹结构？

由于每个项目都有独特的需求，因此没有标准的方法来完成此任务。一个好的起点是将 Entry 文件放在项目根目录中，将 ES6 Config 文件放在“scripts”或“src”子文件夹和各个组件中在下面的文件夹中。

例如

ROOT/server.js ROOT/src/config.es6 ROOT/src/component1/files.es6 ROOT/src/component2/files.es6

有了这个，Babel 将成功地将所有 ES6 转换为 ES5，并支持 A+ 兼容的 Promise。

开始使用 node.js 网络服务器 This Guide 提供了更多的洞察力，在这个答案的上下文中，显示的代码将被放入 ES6 config.es6 文件中，以下代码将进入 入口 server.js 文件：

require("babel-core/register");
require("./src/config.es6");

构建 Isomorphic Web 应用程序的过程与此不同，可能会使用 grunt、gulp、webpack、babel-loader 等，另一个例子可以是 Found Here。

这个答案是这个问题的其他答案提供的几个关键点以及经验丰富的开发人员的贡献和我自己的个人研究和测试的组合。感谢所有协助制作此答案的人。

【讨论】：

有没有我们可以拿来查看示例的存储库？

此答案用于生成以下存储库和链接文件，特别是：github.com/JaxCavalera/Tagged-DBserver/blob/master/server.js

如果你想构建同构并包含服务器端 CSS 等，那么可以在这里找到将 Babel 6 的使用与 Webpack 服务器端相结合的示例：Babel-Loader 已配置 github.com/JaxCavalera/Tagged_Isomorphic/blob/master/… 使用共享 webpack.config.js 配置服务器端 webpack github.com/JaxCavalera/Tagged_Isomorphic/blob/master/… 使用 package.json 文件中定义的 NPM 脚本启动各种 webpack 配置。

@JaxCavalera 但是要求钩子“babel-register”对于生产代码不是不稳定的吗？人们不应该使用“babel-cli”吗？

【参考方案4】：

我认为您应该使用 grunt 或 gulp 之类的工具来管理所有“构建”任务。它会为您自动执行，不会出错。

在一个命令中，您可以将代码转换为 babel ES2015 并启动您的应用程序。

我建议你看看this simple project。 （只需安装 node_modules 并启动 npm start 即可启动 app.js 文件）

但是，如果你真的想手动使用 babel，

.babelrc是文件名，可以看this project (redux)有一个例子

.babelrc 是一个配置文件，如果你想看看它是如何工作的，你可以查看this package.json (always redux)

据我所知，实际上没有标准方法。如果需要，您可以使用下面的项目框架，并发送拉取请求来改进它:-)

【讨论】：

感谢您的回复，我不确定我是否了解如何将其应用于这种情况。我认为 Gulp 用于构建客户端的东西。我不确定如何将“这个简单项目”中的信息应用于手头的问题。我对任务管理器的唯一经验是 Webpack，但据我所知，它也适用于客户端的东西。在 redux 示例中，*.babelrc 是否只需要与 node/babel 的 package.json 文件位于同一文件夹中，以便在终端中运行任何“脚本”：命令时找到并使用它？是第三个链接客户端还是在节点服务器上工作

Gulp 不仅适用于客户端

从 gulp+babel6+node server 和 pg-promise 开始是否有可链接的分步操作？如果我能找到有关如何将它们一起使用的易于理解的文档，这似乎是一个不错的选择。