使用前端库 ​

您可以使用纯粹的JavaScript或任何现代的前端库来构建Neutranojs应用程序。 如果您想使用前端库构建Neutranojs应用程序，推荐通过neu CLI使用已有的应用程序模板：

React ​

neu create myapp --template codezri/neutralinojs-react

• 仓库: codezri/neutralinojs-react

使用任意的前端库 ​

以下教程通过演示我们如何构建Neutranojs React模板，指导您使用NeutranoJS设置任何前端库：

初始化项目 ​

首先，您需要创建一个新的空Neutranojs项目。使用[neutralizojs/nneutraliznojs-zero](https://github.com/neutralinojs/neutralinojs-zero)模板创建一个空项目， 如下所示。

neu create myapp --template neutralinojs/neutralinojs-zero

现在，使用您喜爱的前端框架创建一个新项目。在本教程中，我们将使用React，但您可以根据需要使用任何前端库。您需要在myapp目录中创建此项目

cd myapp
npx create-react-app react-src

配置Neutralinojs项目 ​

neutralizojs-zero模板有一个预先包含的HTML文件和图标，所以删除www目录，因为我们现在不需要这些文件。

rm -rf www

您需要配置Neutralinojs项目来支持前端框架。首先，您可以使用前端框架的构建目录作为根目录。React通常会生成构建目录，因此我们可以如下配置documentRoot。

"documentRoot": "/react-src/build/"

现在，我们的Neutralinojs应用程序知道了项目资源的位置，但它缺少一个图标，所以为应用程序设置一个图标。 您可以从前端框架的默认资源目录中加载一个图标。为了便于演示，让我们使用public目录中的React图标。

"modes": {
    "window": {
      // --- other options
      "icon": "/react-src/public/logo192.png"
    }
  }

配置neu CLI ​

默认情况下，zero模板会使用Neutralizojs CLI从GitHub releases下载Neutraliznojs客户端（又名neutralizo.js）。 然后，CLI会复制neutralizno.js文件到您的应用程序包。 您也可以从NPM仓库安装客户端库，并与应用程序前端打包在一起，同时你需要从Neutralenojs配置中删除clientLibrary属性，以避免从GitHub releases中下载客户端：

我们可以使用以下选项为React配置CLI

"cli": {
    // --- other options
    "resourcesPath": "/react-src/build/",
    // ---
    "clientLibrary": "/www/neutralino.js", // <--- Remove this option
    // ---
  }

现在，您可以将React放在Neutranojs应用程序构建和运行——这可以通过以下步骤实现。

首先，使用以下命令构建React应用程序。

cd react-src
npm run build

最后，运行Neutralenojs应用程序。

cd ..
neu run

使用@neutralinojs/lib初始化本机API ​

您可以使用neu run命令运行应用程序，但还不能使用本机API，因为它尚未初始化。要做到这一点，您需要使用以下命令安装Neutralinojs客户端：

cd react-src
npm install @neutralinojs/lib

下一步是加载Neutralenojs全局变量。 然后在您选择的框架的根HTML文件中包含JavaScript脚本。

React的主要HTML文件通常是./public/index.html，因此我们可以将下面的html片段放在这个文件里以加载客户端库。

<script src="%PUBLIC_URL%/__neutralino_globals.js"></script>

现在，在前端应用程序入口文件初始化客户端库。React的应用程序入口点通常是./src/index.js。我们可以通过调用@neutraminojs/lib包中的init函数来完成初始化过程。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// Import init function from "@neutralinojs/lib"
import { init } from "@neutralinojs/lib"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

init(); // Add this function call

让我们验证客户端库是否正确加载，为此，让我们使用filesystemAPI来读取Neutranojs应用程序的当前目录。

首先，您需要更新neutration.config.json，以允许应用程序调用API。您可以启用整个命名空间filesystem.*，也可以从给定的命名空间中启用单个函数，如下面的代码片段所示。

"nativeAllowList": [
  "app.*",
  "filesystem.readDirectory"
],

现在，让我们在中添加以下片段./src/App.js文件，APP组件挂载时，将打印当前目录或打印错误消息。

import { useEffect } from 'react'
import './App.css';

// Import filesystem namespace
import { filesystem } from "@neutralinojs/lib"

function App() {

  // Log current directory or error after component is mounted
  useEffect(() => {
    filesystem.readDirectory('./').then((data) => {
      console.log(data)
    }).catch((err) => {
      console.log(err)
    })
  }, [])

  return (
    <div className="App">
      My Neutralinojs App
    </div>
  );
}

export default App;

最后一步是使用--window-enable-inspector参数运行Neutralinojs应用程序，该参数将允许您打开开发人员工具。

cd react-src
npm run build

cd ..
neu run -- --window-enable-inspector

当前目录会打印到控制台中。如果要打开开发人员工具，请右击Neutralinojs程序中的任意位置，然后按inspect element。

启用热重载 ​

每一次s更改代码都构建和测试应用程序无疑是非常耗时的。因此，您可以使用前端框架的HMR（热重载）功能来加快开发。 但是，我们有一个小问题。现在有两个HTTP服务器：Neutranojs资源服务器和前端框架的开发服务器。我们如何从前端框架的开发服务器加载Neutranojs客户端库？

别担心，neu CLI提供了一个内置功能，可以通过修补主HTML文件来启用HMR。您可以将以下部分添加到配置文件中以激活热重载。

"cli": {
    // --- other options
    "frontendLibrary": {
        "patchFile": "/react-src/public/index.html",
        "devUrl": "http://localhost:3000"
    }
  }
}

上面的选项告诉neu CLI主HTML文件和开发服务器URL。

现在，启动您的前端开发服务器。在React中，我们可以使用以下命令来完成。

npm start

最后，使用下面的命令启动Neutralinojs应用。

neu run --frontend-lib-dev

在输入上述命令之前，请确保构建一次前端，因为它从Neutranojs应用程序资源目录（而不是前端框架的目录）加载客户端库全局变量。

打包 ​

要生成应用程序二进制文件，首先我们需要通过前端开发工具生成静态资源。然后，我们可以生成Neutranojs应用程序包，如以下命令片段所示：

cd react-src
npm run build

cd ..
neu build --release

请在此处查看本教程的完整源代码。