一个 JBoss 项目
红帽
首页 / 文档 / 操作指南 / Neon 3 JavaScript 开发入门

操作指南

Neon 3 JavaScript 开发入门

使用 IDE 中的 Neon 3 功能完成以下任务

  1. 使用包管理器

    1. 创建新项目

    2. 启用 Bower Init

    3. 启用 npm Init

    4. 创建新 index.html 文件

    5. 使用 Bower 工具

  2. 使用构建系统

    1. 向 package.json 文件添加依赖项

    2. 启用 Gulp 插件

    3. 创建 gulpfile.js 文件

    4. 使用 Gulp 插件

  3. 使用 Node.js 应用程序

    1. 导入 jsdt-node-test-project

    2. 运行 index.js 文件

    3. 调试 Node.js 应用程序

Neon 3 现在还会使用支持 ECMAScript 2015 (JavaScript 6) 的新 Esprima 解析器。该解析器直观且可帮助完成以下任务

  • 语法着色

  • 验证

  • 内容助手

  • 关键字模板

  • 类定义

  • 模板 string

  • 与纲要视图集成

使用包管理器

Bower 和 npm 是包管理器，它们允许您单击一下安装插件正常运行所需的所有依赖项。

在这一节中，我们列出了启用 Bower Init 和 npm Init 的步骤。您可以选择使用其中一个包管理器并执行相应步骤

如果您使用的是 npm，则必须使用 package.json 文件；如果您使用的是 Bower，则必须使用 bower.json 文件。

先决条件

通过运行命令行中的 npm -v 和 bower -v 命令，确保已在系统中安装 npm 和 bower。

如果您同时安装 npm 和 bower，请确保先安装 npm，再安装 Bower。

  • 有关安装 npm 的详细说明，请参见附录中的 安装 npm。

  • 要安装 Bower，需要以 root 用户身份运行 npm install -g bower 命令。

创建一个新项目

在这一部分，您将创建一个新项目，以便随后您可以启用依赖项，并了解 Neon 3 的功能如何运作。

要创建一个项目

  1. 单击文件 > 项目。

  2. 在创建项目向导中，单击常规 > 项目。单击下一步。

  3. 在项目名称字段中，键入项目的名称（在本示例中，为Neon3_features）。

  4. 根据需要编辑其他字段，然后单击完成。

结果：新项目在项目资源管理器视图中列出。

启用 Bower 初始化

启用 Bower 初始化后，结果将为在项目资源管理器视图中项目下列出的bower.json文件。

要启用 Bower 初始化

  1. 在项目资源管理器视图中，右键单击Neon3_features，然后单击新建 > 其他。

  2. 在新建向导，键入筛选文本字段中，键入bower。选择Bower 初始化后，单击下一步。

  3. 在Bower 初始化向导中（可选）

    1. 清除使用默认配置复选框。

    2. 在版本字段中，键入0.0.1。

    3. 在许可证字段中，键入MIT。

  4. 单击完成。

结果：bower.json文件在默认编辑器中打开。

Contents of the bower.json file
图 1. bower.json 文件的内容

启用 npm 初始化

要启用 npm 初始化

  1. 在项目资源管理器视图中，右键单击Neon3_features，然后单击新建 > 其他。

  2. 在新建向导，键入筛选文本字段中，键入npm。选择npm 初始化后，单击下一步。

  3. 在npm 初始化向导中（可选）

    1. 清除使用默认配置复选框。

    2. 在版本字段中，键入0.0.1。

    3. 在许可证字段中，键入MIT。

  4. 单击完成。

结果：package.json文件在默认编辑器中打开。

创建新的 index.html 文件

在本部分中，您创建一个index.html文件，以便可在使用 Bower 工具时使用此文件。

要创建index.html文件

  1. 在项目资源管理器视图中，右键单击Neon3_features，然后单击新建 > 文件。

  2. 在新建文件向导中

    1. 确保已选择Neon3_features作为父文件夹。

    2. 在文件名字段中，键入index.html。

  3. 单击完成。空的index.html文件将在默认编辑器中打开。

  4. 复制以下代码片段并将其粘贴到index.html文件中。

    <!DOCTYPE html>
<html>
<head>
<title>npm / bower / JSON editor</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> </head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>

  5. 保存文件。

使用 Bower 工具

要使用 Bower 工具

  1. 在项目资源管理器视图中，展开Neon3_features以查看bower.json和index.html。

  2. 双击index.html在默认编辑器中打开此文件（若尚未打开）。编辑器将显示 bootstrap 模板。

  3. 右键单击index.html，然后单击使用 > Web 浏览器打开此文件。请注意，页面不会显示应用于它的任何 bootstrap 主题或样式。

    index.html Page without Theme and Style Applied to it
    图 2. 未应用主题和样式的 index.html 页面

    要能够查看应用于页面的主题和样式，您必须编辑包含依赖项的bower.json文件。

    要编辑bower.json文件

  4. 在项目浏览器视图中，双击bower.json以在默认文本编辑器中打开它。json 编辑器大纲支持

    • 允许您浏览 json 文件

    • 允许您验证语法错误

  5. 定义 jquery 和 bootstrap 依赖项

    1. 关闭方括号 ]后，添加一个逗号（,）。

    2. 在下一行中键入

             "dependencies" : {
          "jquery" : "*",
          "bootstrap" : "~3.3.6"
          }

  6. 保存文件。文件的具体内容如下图所示。

    bower.json File Edited
    图 3. bower.json 文件已编辑

  7. 右键单击bower.json，然后单击运行方式 > Bower 安装。您可以在控制台视图中查看依赖项安装进度。

  8. 展开bower_components文件夹以确保它包含bootstrap和jquery。

  9. 刷新index.html网页。

结果：页面显示带有响应式设计的 bootstrap 模板。

index.html Page with Responsive Design
图 4. 具有响应式设计的 index.html 页面

使用构建系统

在此部分中，您将使用 npm 包管理器，进而使用package.json文件。

您可以使用 Grunt 或 Gulp 构建系统从 IDE 直接运行任务，而不是每次想要运行任务时都切换到 CLI。

先决条件

  • 通过运行以下命令，确保系统上安装了 Gulp 或 Grunt 插件

    • 对于 Gulp 插件，运行命令：gulp -v

    • 对于 Grunt 插件，运行命令：grunt -v

如果未安装，请使用以下命令安装

  • 要安装 Gulp 插件，请以 root 用户身份运行命令 npm install --global gulp-cli。

  • 要安装 Grunt 插件，请以 root 用户身份运行命令 npm install --global grunt-cli。

本部分描述了 Gulp 的工作流程。但是，Grunt 和 Gulp 均受到支持，它们的工作流程类似。

向 package.json 文件添加依赖项

本部分仅当您使用package.json文件时适用。如果您使用bower.json文件，请跳过本部分。

您必须将依赖项添加到package.json文件才能在启用 Gulp 插件中使用它。

要添加依赖项

  1. 在项目浏览器视图中，展开neon3_features并双击package.json以在默认编辑器中打开文件。

  2. 在"license": "MIT"之后，添加一个逗号（,）。

  3. 在下一行添加以下代码片段

        "devDependencies" : {
    "jquery" : "*",
     "angular" : "*",
    "bootstrap" : "~3.3.6"
    }

  4. 保存文件。package.json文件的具体内容如下图所示。

package.json File as Edited
图 5. 经编辑后的 package.json 文件

启用 Gulp 插件

若要使用任务运行程序 Grunt 或 Gulp，首先必须定义这些插件所需的下列从属项

  • 在 bower.json 文件的从属项下，必须具有 “gulp”:”” 或 “grunt”:”*”。

  • 在 package.json 文件的从属项下，必须具有 “gulp”:”” 或 “grunt”:””。

在本部分中，我们将详细介绍启用 Gulp 插件的步骤。使用相同的步骤可启用 Grunt 插件。

若要启用 Gulp 插件

  1. 在 Project Explorer 视图中，展开 neon3_features，然后双击 package.json，以在默认编辑器中打开它。

  2. 在 package.json 文件的 devDependencies 下，在文件中定义的最后一个从属项后，键入逗号 (,)。

  3. 在下一行中，键入 "gulp": "*",。

  4. 在下一行键入 "gulp-rename": "*"，然后保存文件。package.json 文件的内容如图中所示。

    package.json File with Gulp Enabled
    图 6. 已启用 Gulp 的 package.json 文件

  5. 在 package.json 文件中，单击 Run As > npm Install。Console 视图显示任务的进度。在此时间点上，请忽略任何警告。

结果: node_modules 文件夹显示在 Project Explorer 视图中的项目下面。

创建 gulpfile.js 文件

在本部分中，你将创建 gulpfile.js 文件，以在 使用 Gulp 插件 中使用它。

创建 gulpfile.js 方法：

  1. 右键单击 neon3_features，然后单击 New > Other。

  2. 在 New 向导的搜索字段中，键入 JavaScript。

  3. 单击 JavaScript Source File，然后单击 Next。在 New JavaScript file 窗口中

    1. 单击 neon3_features。

    2. 在 File name 字段中，键入 gulpfile.js。

  4. 单击 Finish。空文件将在默认编辑器中打开。

  5. 复制以下内容并将其粘贴到 gulpfile.js 文件中

        var gulp = require('gulp')
, rename = require('gulp-rename');

// task
gulp.task('default', function () {
        gulp.src('./index.html') //path to file to be renamed
        .pipe(rename('renamed.html')) // rename index.html to renamed.html
        .pipe(gulp.dest('renamed-html')); // destination folder
});

  6. 保存文件。gulpfile.js 文件的内容如图中所示。

gulpfile.js File
图 7. gulpfile.js 文件

使用 Gulp 插件

使用 Gulp 插件的方法：

  1. 在 Project Explorer 视图中，展开 neon3_features，然后双击 gulpfile.js，以在编辑器中打开文件。文件中定义了多个 Gulp 任务。

  2. 右键单击 gulpfile.js，然后单击 Run As > Gulp Task。Console 视图显示任务的进度。

  3. 你也可以选择在 Project Explorer 视图中展开 gulpfile.js 并查看所有任务。右键单击每个任务，然后单击 Run As > Gulp Task 以查看任务。

结果：在 neon3_features 下创建了一个名为 renamed-html 的新目录。展开 renamed-html 目录以查看 renamed.html 文件。

使用 Node.js 应用程序

在本部分中，您将使用以下项目的地址：https://github.com/ibuziuk/jsdt-node-test-project。

先决条件

  • 确保已安装 npm 和 node.js。有关安装的详细信息，请参阅附录。

导入 jsdt-node-test-project

要导入 jsdt-node-test-project

  1. 运行命令 git clone https://github.com/ibuziuk/jsdt-node-test-project 以在本地系统上克隆项目: 。

  2. 在 IDE 中，依次单击“文件”>“从文件系统打开项目”。

  3. 在“从文件系统或归档打开项目”窗口中，单击“打开源”字段旁边的“目录”。

  4. 找到 jsdt-node-test-project 并单击“确定”。

  5. 在“从文件系统或归档打开项目”窗口中，单击“完成”。

结果：jsdt-node-test-project 在“项目资源管理器”视图中列出。

运行 index.js 文件

要使用 node.js 应用程序

  1. 在“项目资源管理器”视图中，展开 jsdt-node-test-project。

  2. 右键单击 package.json，然后单击“作为运行”>“npm 安装”。“控制台”视图显示任务的进度。

  3. 右键单击 index.js，然后单击“作为运行”>“Node.js 应用程序”。

结果：“控制台”视图显示“侦听端口 3000”消息。打开 localhost:3000 可在网页上查看输出。

Output of the index.js File
图 8. index.js 文件的输出

调试 Node.js 应用程序

要调试 node.js 应用程序

  1. 在“项目资源管理器”视图中，展开 jsdt-node-test-project，然后双击 index.js 以在默认编辑器中将其打开。

  2. 要添加断点，请右键单击要停止代码执行的行号，然后单击“切换断点”。保存文件。

  3. 右键单击 index.js，然后单击“作为调试”>“Node.js 应用程序”。

结果：“控制台”视图显示“调试程序侦听端口 <端口号>”消息。

Debugging the Node.js Application
图 9. 调试 Node.js 应用程序

使用以下功能来执行不同的任务

  • 检查变量：所有变量都列在“变量”视图中。使用此视图搜索特定变量并检查它们。

  • 检查主 node.js 文件：主 node.js 文件在默认编辑器（在此例中为 index.js）中打开。您可以将鼠标悬停在变量上以查看函数。

  • 编辑主 node.js 文件：您可以编辑主 node.js 文件并将其保存，以便查看自动传播到 VM 的更改。

附录

安装 node.js

要安装 node.js

安装 npm

npm 与 node.js 一起发布。因此，当您安装 node.js 时，npm 将可用。
返回顶部