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

How do I setup Babel 6 with Node JS to use ES6 in my Server Side code?

提问by Jax Cavalera

I have read several times the documentation provided at : Node API Babel 6 Docs

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

I'm starting out learning pg-promise following the Learn by Example tutorial and would prefer to work with ES6 and transpile to ES5 with Babel but am unsure of a few things :

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

1. After installing babel-core, what preset do I use and where/how do I configure this to work?

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

The documentation was unclear to me about which file I put: require("babel-core").transform("code", options);into and what parts of that code are place holders. When I use that code, do I just use it one time somewhere and then I can use ES6 in every other file? How would this be achieved?

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

1. I read about this .babelrc file and would like to confirm if the actual filename is ".babelrc" or if that is just the file extension and where in relation to the root directory of my project do I put that file.. and how do I link to it?

2. If I'm using pg-promiseshould I be using ES6 and Babel or will running : npm install as described under the Testingsection for pg-promise be enough and trying to use ES6 with this create more problems?

2. 我读到了这个 .babelrc 文件，想确认实际文件名是否是“.babelrc”，或者这只是文件扩展名，以及与我的项目的根目录相关的位置，我把那个文件放在哪里......以及如何做我链接到它？

3. 如果我使用pg-promise，我应该使用 ES6 和 Babel 还是将运行： npm install 如pg-promise的测试部分所述就足够了，并且尝试使用 ES6 会产生更多问题？

I was hoping to take advantage of let and const if the need came up during my server side development.

如果在我的服务器端开发期间出现需求，我希望利用 let 和 const 。

1. Is there a standard file structure for a node+babel+pg-promise server setup?

4. node+babel+pg-promise 服务器设置有标准的文件结构吗？

EditWorth noting that I have also read Node JS with Babel-Nodeand saw that using this should be avoided. The final answer at the very bottom didn't really make sense to me for similar reasons I'm having trouble following the actual documentation provided by Babel.

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

回答by Jax Cavalera

1.a What Preset is needed?

1.a 需要什么预设？

You will need to install Babel firstly with npm install babel-core --save-devin the root directory of your project using a Terminal window like Command Prompt.

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

Once installed, you will need to install the es2015 presetwith npm install babel-preset-es2015 --save-dev. Babel-Core is Promises/A+ Compliant but not idealfor usage due to poor error handling so a library such as Bluebirdshould be used instead for this purpose. In order to transpile, babel-core will still need to be installed and es2015 enables ES6->ES5 transpiling so you can use fancy things like let and const etc.

一旦安装，您将需要安装ES2015预设有npm install babel-preset-es2015 --save-dev。Babel-Core 符合 Promises/A+ 标准，但由于错误处理不佳，因此不适合使用，因此应使用Bluebird等库来代替此目的。为了转译，仍然需要安装 babel-core 并且 es2015 启用了 ES6->ES5 转译，所以你可以使用像 let 和 const 等奇特的东西。

1.b Where to put require("babel-core");?

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

instead, use require("babel-core/register");and place it inside your Entryfile typically called, "server.js". The server.js file will need to use CommonJS (ES5) exclusively.

相反，使用require("babel-core/register");并将其放置在通常称为“server.js”的Entry文件中。server.js 文件需要专门使用 CommonJS (ES5)。

By using the "require"statement it will apply all relevant transforms to all code being required into the Entryfile and all files being required/included into those files.

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

You point to the Entryfile inside package.json under the "main":section.

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

Package.json is created when you initialise the project with npm initat the root directory of your project inside the Terminal Window

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

One approach to this would be :

一种方法是：

• Entry File- server.js
• server.js- requires {babel-core and the main ES6 file : config.js/jsx/es6/es}
• config.es6- uses ES6 and has includes(requires) for all other project files that can also use ES6 as they get transpiled by being loaded into the "config"file which is being directly transpiled by babel-core.

• 入口文件- server.js
• server.js- 需要 {babel-core 和主 ES6 文件：config.js/jsx/es6/es}
• config.es6- 使用 ES6 并包含（需要）所有其他项目文件，这些文件也可以使用 ES6，因为它们通过加载到“config”文件中而被转译，该文件由 babel-core 直接转译。

2. What is .babelrc?

2.什么是.babelrc？

.babelrcis the filename and should be placed in the same folder as your package.json file (normally the root directory) and will automatically "load" when babel-core is required to determine which preset(s) or plugins are to be used.

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

Inside .babelrc, you will need to add the following code :

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

{
  "presets": ["es2015"]
}

3. pg-promise Testing Section

3. pg-promise 测试部分

A direct quote from the developer recently answered this

开发商的直接报价最近回答了这个

You do not need to worry about steps in the Tests, use only the steps in the install. The one in tests relates to the dev dependency installation, in order to run tests. The pg-promise can work with any promise library compliant with Promises/A+ spec.

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

4. Standard File/Folder Structure for Server Side Projects?

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

There is no standard way to achieve this task as each project has unique demands. A good starting point would be to place the Entryfile in the project root directory, the ES6 Configfile in a "scripts" or "src" sub-folder and individual components in folders below that.

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

e.g.

例如

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

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

With this in place, Babel will successfully transpile all ES6 to ES5 and enable support of A+ compliant promises.

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

To begin using the node.js webserver This Guideprovides a bit more insight and in the context of this answer the code shown would be placed into the ES6 config.es6 file and the following code would go into the Entryserver.js file :

开始使用 node.js webserver本指南提供了更多的见解，在这个答案的上下文中，显示的代码将放入 ES6 config.es6 文件中，以下代码将放入Entryserver.js 文件中：

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

The process for building Isomorphic web applications is different to this and would likely use things like grunt, gulp, webpack, babel-loader etc another example of which can be Found Here.

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

This answer is the combination of several key points provided by other answers to this question as well as contributions from experienced developers and my own personal research and testing. Thank you to all who assisted in the production of this answer.

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

回答by Isaac Pak

1. This answer uses this simple directory structure

   project/server/src/index.js=> your server file

   project/server/dist/=> where babel will put your transpiled file

2. Install babel dependencies

   npm install -g babel nodemon

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

3. Add these npm scripts to your package.json file

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

4. Create a .babelrc file in your project root directory

   { "presets": "es2015" }

5. Transpile your directory with

   npm run compile

6. Run your server with

   npm run server

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

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

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

2. 安装 babel 依赖

   npm install -g babel nodemon

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

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

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

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

   { "presets": "es2015" }

5. 转译您的目录

   npm run compile

6. 运行你的服务器

   npm run server

回答by Aslam Shaik

@makeitsimple

@makeitsimple

Step: 1

第1步

npm install nodemon --save

In project directory

在项目目录

Step: 2

第2步

yarn add babel-cli

yarn add babel-preset-es2015

Step: 2 In package.json-> scipts change 'start' to the following

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

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

Step: 3

步骤：3

yarn start

回答by mfrachet

I think you should use a tool like grunt or gulp to manage all your "build" tasks. It will automate it for you, and you won't make errors.

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

In one command, you can transpile your code into babel ES2015 et start your application.

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

I suggest you to take a look at this simple project. (just install node_modules and launch npm start to start the app.js file)

我建议你看看这个简单的项目。（只需安装 node_modules 并启动 npm start 即可启动 app.js 文件）

However, if you really want to use babel manually,

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

• .babelrc is the name of the file, you can see one in this project (redux)to have an example

• .babelrc is a config file, if you want to see how it works, you can check this package.json (always redux)

• There's actually no standard way that I know. You can use the project skeleton below if needed, and send pull request to improve it :-)

• .babelrc 是文件名，你可以在这个项目（redux）中看到一个例子

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

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