使用 npm 模块和 NativeScript 插件

去年，npm 成为软件领域最大的包管理器，截至目前，拥有超过 167,000 个模块。因此，npm 包含了大量针对 JavaScript 应用的预制解决方案，包括 NativeScript 应用，因为 NativeScript 遵循与 Node 模块相同的CommonJS 规范。

在 npm 模块和 NativeScript 插件之间，插件只不过是能够使用原生代码和库的 npm 模块，你现在拥有了一个庞大的模块和库集合，可以在你的 NativeScript 应用中使用。

让我们看看如何在你的下一个移动应用中使用一个你肯定需要的模块：敲敲门笑话模块。

向你的应用添加 npm 模块

要在 NativeScript 应用中使用模块，你必须首先安装它。你可以在 npm 网站的右上角找到安装说明。以下是敲敲门笑话仓库的安装说明位置

注意：npm i 是 npm install 的简写。我个人更喜欢较长的版本，因为“install”更清晰。

关于安装，你需要了解两点 NativeScript 特定的内容。首先，你需要从 NativeScript 应用的根目录运行安装，也就是这里

my-project <----------------
    ├── app
    │   └── ...
    ├── package.json
    └── platforms
        ├── android
        └── ios

提示：NativeScript CLI 需要此位置才能在构建时将安装的 npm 模块加载到相应的文件夹中。因此，如果在运行时遇到文件未找到错误，请确保你已在应用的根目录中安装了模块。

第二个重要说明是使用 --save 标志安装模块。

$ npm install knock-knock-jokes --save

这会将你的项目对模块的依赖保存到应用的 package.json 文件中。运行安装后，你应该会在 package.json 的“dependencies”对象中看到该模块的列表。请注意下面“knock-knock-jokes”的位置。

{
    "nativescript": {
        ...
    },
    "dependencies": {
        "knock-knock-jokes": "^1.7.0"
    }
}

安装完成后，你还会在你的应用中看到一个新的 node_modules 文件夹，其中包含新安装的敲敲门笑话模块。

.
├── app
│   └── ...
├── node_modules
│   └── knock-knock-jokes
├── package.json
└── platforms
    └── ...

安装完成后，让我们看看如何实际使用该模块。

在你的应用中使用 npm 模块

要使用 npm 模块，你只需 require() 它并使用其文档中的 API 即可。传递给 require() 的字符串通常是模块名称，通常也在模块页面上进行了说明。例如，以下是敲敲门笑话仓库中对其进行说明的位置

从那里，你只需使用模块的 API 即可。敲敲门笑话的 API 很简单，你只需调用 knockknock() 即可获得一个随机笑话。

var knockknock = require("knock-knock-jokes");
console.log(knockknock());

为了提供一个更健壮的示例，以下是一个小型 NativeScript 应用，展示了敲敲门笑话模块的实际应用

// main-page.js
var knockknock = require("knock-knock-jokes");
var observable = require("data/observable");
var pageData = new observable.Observable();</p>
 
exports.loaded = function(args) {
    args.object.bindingContext = pageData;
};
exports.generateJoke = function() {
    pageData.set("joke", knockknock());
};
 

这会生成以下令人惊叹的 NativeScript 应用

你可能不需要在下一个生产应用中使用敲敲门笑话模块，所以让我们继续讨论一个你可能想要使用的模块：Moment.js。

使用 Moment.js

如果你不熟悉 Moment.js，它是一个非常强大且有用的日期解析和格式化模块。要开始使用 Moment.js，你可以在npm 上找到它，并运行其安装说明，记住要指定 --save 标志

$ npm install moment --save

与敲敲门笑话模块一样，这将从 npm 下载 Moment.js，并将 Moment.js 作为依赖项存储在应用的 package.json 文件中。要在你的应用中使用 Moment.js，你只需 require() 它并使用其文档中的 API 即可。例如，以下代码会记录当前一周的日期

var moment = require("moment");
console.log(moment().format("dddd"));

让我们回到敲敲门应用，并在其中添加 Moment.js，以格式化的时间戳的形式——因为你不想忘记生成这些笑话的日期和时间。

使用 Moment.js，将此功能添加到 NativeScript 应用中非常容易。首先向页面的 XML 添加一个新的标签以保存时间戳

<Label text="{{ timestamp }}" cssClass="red" />

提示：cssClass 属性用于为该标签元素分配“red”CSS 类名。应用的 CSS 包含 .red { color: red; font-style: italic; } 以使其在上面的屏幕截图中显示为红色。

然后在页面的 JavaScript 中，添加一个 require() 调用以引入 Moment.js

var moment = require("moment");

然后是一些 JavaScript 代码，用于在用户每次点击笑话按钮时设置视图模型上的时间戳属性

exports.generateJoke = function() {
    pageData.set("joke", knockknock());
    pageData.set("timestamp", "Generated on " +
        moment().format("LL") +
        " at " +
        moment().format("h:mm:ss a"));
};

提示：你可以参考Moment.js 的文档，以详细了解 format() 方法的工作原理以及可以传递给它的各种选项。

就是这样！如果你想自己尝试这个示例，以下是可以复制粘贴的应用的 XML 和 JavaScript 文件代码片段

<!-- main-page.xml -->
<Page loaded="loaded">
    <StackLayout>
        <Button text="Joke me" tap="generateJoke" />
        <Label text="{{ joke }}" textWrap="true" />
        <Label text="{{ timestamp }}" cssClass="red" />
    </StackLayout>
</Page>

进行此更改后，应用外观如下所示

希望这能让你了解 npm 为 NativeScript 应用带来的强大功能。当你引入 NativeScript 插件时，功能将变得更加强大。

添加 NativeScript 插件

NativeScript 插件只不过是具有额外功能的 npm 模块，这些功能可以访问原生代码，甚至利用现有的 Android 和 iOS SDK。由于 NativeScript 插件位于 npm 上，因此我们刚刚介绍的大多数 npm 模块说明也适用于 NativeScript 插件。唯一的区别在于安装，因为你使用 tns plugin add 命令安装 NativeScript 插件。例如，以下是如何安装NativeScript 剪贴板插件

$ tns plugin add nativescript-clipboard

tns plugin add 仍然从 npm 进行安装，并且仍然将依赖项保存到你的 package.json 文件中。但是，该命令还会执行一些其他操作，例如处理插件使用的任何 iOS 和 Android 库以及配置文件。例如，NativeScript 手电筒插件使用 AndroidManifest.xml 代码片段来设置应用使用相机所需的适当 Android 权限。

要了解插件如何实际工作，让我们看看如何将NativeScript 社交分享插件添加到敲敲门应用中——因为如果不能与朋友分享笑话，笑话应用有什么用呢？

首先，你将需要运行 tns plugin add 命令进行安装

$ tns plugin add nativescript-social-share

从那里，你只需 require() 插件并使用其文档中的 API 即可。例如，以下操作会调用 iOS 和 Android 原生分享窗口部件以分享文本“hello world”

要将此功能添加到敲敲门笑话应用中，让我们添加 NativeScript 1.2 中引入的新 UI 组件之一：<ActionBar>。以下操作会向应用添加一个操作栏，其中包含一个分享按钮

<Page.actionBar>
    <ActionBar title="knockknock">
        <ActionBar.actionItems>
            <ActionItem text="Share" tap="share" ios.position="right" />
        </ActionBar.actionItems>
    </ActionBar>
</Page.actionBar>

新按钮在用户点击时调用 share()，因此要创建该函数，你可以将以下代码添加到 JavaScript 代码中。所有代码都只是 require() 插件并将笑话的文本内容传递给 shareText()。

var socialShare = require("nativescript-social-share");
exports.share = function() {
    socialShare.shareText(pageData.get("joke"));
};

以下是可以复制粘贴的应用文件的版本，你可以自己尝试

<!-- main-page.xml -->
<Page loaded="loaded">
    <Page.actionBar>
        <ActionBar title="knockknock">
            <ActionBar.actionItems>
                <ActionItem text="Share" tap="share" ios.position="right" />
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>
    <StackLayout>
        <Button text="Joke me" tap="generateJoke" />
        <Label text="{{ joke }}" textWrap="true" />
        <Label text="{{ timestamp }}" cssClass="red" />
    </StackLayout>
</Page>

以下是更新后的应用在 iOS 和 Android 上的界面

总结

总的来说，能够使用 npm 模块极大地扩展了您在 NativeScript 应用中可以执行的操作数量。需要处理数组和对象的实用功能？可以使用 lodash 或 underscore。需要在您的应用中撰写电子邮件？尝试使用 NativeScript 邮件插件。

如果您正在寻找一个不存在的 NativeScript 插件，您可以在我们的想法门户网站上提出请求，或者，您可以尝试自己创建插件。敬请期待我们的插件市场，我们将在那里列出您可以在应用中使用的精选 NativeScript 插件；我们将在本月晚些时候推出该市场。