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

时间:2015-11-10 06:23:28

标签: node.js postgresql babeljs pg-promise

我已多次阅读以下文件: Node API Babel 6 Docs

我开始学习pg-promise遵循Learn by Example教程,并且更愿意使用ES6并使用Babel转换到ES5,但我不确定一些事情:

  1. 安装babel-core后,我会使用什么预设以及在何处/如何配置它?
  2. 我不清楚文档中我放了哪个文件: require(“babel-core”)。transform(“code”,options); into和该代码的哪些部分是占位符。当我使用该代码时,我只是在某处使用它然后我可以在每个其他文件中使用ES6吗?如何实现这一目标?

    1. 我读到了这个.babelrc文件,并想确认实际的文件名是否是“.babelrc”,或者如果那只是文件扩展名和我项目的根目录相关的位置我放了文件..以及如何链接到它?

    2. 如果我正在使用pg-promise,我应该使用ES6和Babel还是会运行:npm install,如测试部分所述pg-promise就足够了使用ES6会产生更多问题吗?

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

      1. 是否有节点+ babel + pg-promise服务器设置的标准文件结构?
      2. 修改 值得注意的是,我也读过Node JS with Babel-Node,并且发现应该避免使用它。最底层的最终答案对我来说并没有多大意义,因为类似的原因我无法遵循Babel提供的实际文档。

4 个答案:

答案 0 :(得分:44)

1.a需要什么预设?

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

安装完成后,您需要使用npm install babel-preset-es2015 --save-dev安装 es2015预设。由于错误处理不当,Babel-Core的承诺/ A +符合但不理想,因此应使用诸如 Bluebird 之类的库来代替此目的。为了进行转换,仍然需要安装babel-core,es2015支持ES6-> ES5转换,这样你就可以使用像let和const等花哨的东西。

1.b放置require("babel-core");的位置?

而是使用require("babel-core/register");并将其放在通常称为" server.js" 条目文件中。 server.js文件只需要使用CommonJS(ES5)。

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

您指向"main":部分下的package.json内的条目文件。

  

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

一种方法是:

  • 条目文件 - server.js
  • server.js - 需要{babel-core和主ES6文件:config.js / jsx / es6 / es}
  • config.es6 - 使用ES6并包含(要求)所有其他项目文件,这些文件也可以使用ES6,因为它们会被加载到" config&#中进行转换34; 文件由babel-core直接编译。

2。什么是.babelrc?

.babelrc是文件名,应该与package.json文件(通常是根目录)放在同一个文件夹中,并自动加载"当需要babel-core来确定要使用哪些预设或插件时。

.babelrc内,您需要添加以下代码:

{
  "presets": ["es2015"]
}

3。 pg-promise测试部分

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

  

您无需担心测试中的步骤,只需使用安装中的步骤。测试中的一个涉及dev依赖安装,以便运行测试。 pg-promise可以与任何符合Promises / A +规范的promise库一起使用。

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

没有标准的方法来完成这项任务,因为每个项目都有独特的需求。一个很好的起点是将 Entry 文件放在项目根目录中, ES6 Config 文件放在"脚本"或" src"子文件夹和下面文件夹中的各个组件。

e.g。

  • ROOT / server.js
  • ROOT / SRC / config.es6
  • ROOT / SRC / COMPONENT1 / files.es6
  • ROOT / SRC / COMPONENT2 / files.es6

有了这个,Babel将成功地将所有ES6转换为ES5,并支持符合A +标准的承诺。

要开始使用node.js,webserver This Guide提供了更多的洞察力,在此答案的上下文中,显示的代码将放入ES6 config.es6文件中,以下代码将进入< strong>条目 server.js文件:

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

构建同构Web应用程序的过程与此不同,可能会使用grunt,gulp,webpack,babel-loader等其他示例,例如Found Here

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

答案 1 :(得分:5)

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

    project/server/src/index.js =&gt;你的服务器文件

    project/server/dist/ =&gt; 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

答案 2 :(得分:0)

我认为你应该使用像grunt或gulp这样的工具来管理你所有的&#34; build&#34;任务。它会为你自动化,你不会犯错误。

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

我建议你看看this simple project。 (只需安装node_modules并启动npm start以启动app.js文件)

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

  • .babelrc是该文件的名称,您可以在this project (redux)中看到一个示例

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

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

答案 3 :(得分:0)

@makeitsimple

步骤:1

npm install nodemon --save

在项目目录中

步骤:2

yarn add babel-cli

yarn add babel-preset-es2015

步骤:2 在package.json->中,将“开始”更改为以下内容

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

步骤:3

yarn start