在本地Laravel环境中创建一个Node包

如何在本地开发环境中设置环境以测试您在本地Laravel项目中Node包类或实用工具。

您可以通过这个CodeSandbox演示或在GitHub仓库中找到源代码。在Capsules或X上了解更多。

我们开发网络工具时，使用数百个包并不会令人惊讶。要获取它们，您只需使用NPM等包管理器进行购物，截至2024年1月，NPM拥有2,633,573个包。

如果您想开发自己的包，疑问如何在真实条件下测试它是完全合理的。在开发期间在NPM上发布包不是一个好选择。另一种方法是将它集成到一个无NPM的空白项目中。本文中介绍的方法更接近现实场景，但需要环境准备。

创建一个文件夹，作为包的基础。

mkdir package

创建一个 package.json 文件，它是包的基本基础。

package/package.json

{
    "name": "capsulescodes-package",
    "description": "Capsules Codes Package",
    "type": "module",
}

• name：名称应该由左侧的实体名和右侧的包名组成。强烈建议使用描述性的包名，以便用户更容易搜索。
• description：包描述应该清晰简洁。
• type：将module指定为类型允许以ES模块方式加载JavaScript文件，而不是CommonJS模块。

另外，在未包含package.json文件的文件夹中运行npm init将启动一个向导，引导您创建package.json文件的过程。

在包文件夹内创建一个名为src的文件夹。

cd package 
mkdir src

• 除了你和我对它们的接近性之外，文件夹的排列并不具有太多实际意义。

创建一个名为Greeter的JavaScript类，包含一个名为greet的函数，该函数返回字符串Hello world!。

package/src/Greeter.js

export default class Greeter
{
    static greet()
    {
        return 'Hello world!';
    }
}

然后，您需要指定包应该引用哪个文件，在这种情况下，默认情况下为src/Greeter.js。

package/package.json

{
    ...
    "main" : "src/Greeter.js"
    ...
}

现在，您可以测试此包了。要进行此操作，您需要使用Laravel项目模板创建一个测试环境。

返回package的父目录，创建一个用于测试模板的Laravel项目。本文使用Laravel Vue Inertia Tailwind项目作为template。

cd ..
mkdir template
cd template

包已准备就绪，可进行安装。

在template项目的根目录运行命令npm install ../package或在package.json文件中指定新的本地依赖项。

template/package.json

{
    "dependencies": {
        "capsulescodes-package" : "file:../package"
    }
}

• file:注释表示它是本地文件夹的路径。在package文件夹中进行的更改将在template文件夹的node_modules文件夹中生效。
• 使用npm uninstall capsulescodes-package可以卸载本地包。

通过终端进行测试

> node -e "import( 'capsulescodes-package' ).then( module => console.log( module.default.greet() ) );"

Hello world!

通常不直接通过node运行代码，但-e或--eval允许您评估给定的参数。

或修改Welcome.vue文件以测试静态的Greeter类

template/resources/js/pages/Welcome.vue

<script setup>

import Greeter from 'capsulescodes-package';

import logotype from '/public/assets/capsules-logotype.svg';

</script>

<template>

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center">

        <img class="w-24 h-24" v-bind:src="logotype" v-bind:alt="'Capsules Codes Logotype'">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="Greeter.greet()" />

    </div>

</template>

工作环境已设置。

添加一个附加方法say（它接受一个string作为参数）以实时测试工具会很感兴趣。

package/src/Greeter.js

export default class Greeter
{
		...

    static say( something )
    {
        return something;
    }
}

通过终端进行测试

> node -e "import( 'capsulescodes-package' ).then( module => console.log( module.default.say( 'That\'s a quick way to develop and test a package!' ) ) );"

That's a quick way to develop and test a package!

或修改Welcome.vue文件以测试静态的Greeter类

template/resources/js/pages/Welcome.vue

<script setup>

import logotype from '/public/assets/capsules-logotype.svg';

import Greeter from 'capsulescodes-package';

</script>

<template>

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center">

        <img class="w-24 h-24" v-bind:src="logotype" v-bind:alt="'Capsules Codes Logotype'">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="Greeter.greet()" />

        <h2 class="mt-4 text-xl font-bold select-none header-mode" v-text="Greeter.say( 'That\'s a quick way to develop and test a package!' )" />

    </div>

</template>

在此阶段，一切准备就绪，可以开发一个简单的Node包。然而，本文的重点在于实现一个npm run greet命令，该命令将调用静态的Greeter类。

首先需要创建greet命令。要做到这一点，请返回到package文件夹，并在源目录src的Commands文件夹中创建Greet.js命令。

package/src/Commands/Greet.js

#!/usr/bin/env node

import Greeter from '../Greeter.js';

console.log( Greeter.greet() );

• #!/usr/bin/env node表示这是一个Node可执行文件。

在template中访问此命令，您可以运行以下操作之一：

node node_modules/capsulescodes-package/src/commands/greet.js

或者，在package.json文件中添加一个脚本，可以达到相同的结果

template/package.json

"scripts": {
    ...
    "greet": "node node_modules/capsulescodes-package/src/commands/greet.js"
},

> npm run greet

> greet
> node node_modules/capsulescodes-package/src/commands/greet.js

Hello world!

剩下的事情就是通过package.json创建二进制文件。

package/package.json

"bin": {
    "greet" : "src/Commands/Greet.js"
}

此属性在安装包时，将指定文件src/Commands/Greet.js复制并粘贴到node_modules/.bin/文件夹中，并将此文件重命名为给定密钥greet。

如果，如我们的案例，我们的包已经安装，运行另一个npm install ../package将重新启动进程。

只需向package.json文件添加一个新脚本或简单地运行命令npx greet [其中npx greet相当于node node_modules/.bin/greet]。

template/package.json

"scripts": {
    "greet": "greet"
},

> npm run greet

> greet
> greet

Hello world!

> npx greet

Hello world!

对于静态方法say及其参数的情况，需要新的命令。

package/src/Commands/Say.js

#!/usr/bin/env node

import Greeter from '../Greeter.js';

console.log( Greeter.say( process.argv[ 2 ] ) );

• process.argv表示命令的参数，其中process.argv[0]包含node，而在本例中，process.argv[1]包含node_modules/.bin/say二进制文件。

可以将此命令添加到 package.json 文件中的二进制列表中。

package/package.json

"bin": {
    "say" : "src/Commands/Say.js"
}

您只需要向 package.json 文件添加一个新的脚本，或者直接运行命令 npx say "Capsules Codes"。

template/package.json

"scripts": {
    ...
    "say": "say"
},

> npm run say "Capsules Codes"

> say
> say Capsules Codes

Capsules Codes

> npx say "Capsules Codes"

Capsules Codes

您想要发布这个了不起的包吗？还需要最后一个小步骤：避免发布项目中所有的文件

package/package.json

"files": [ "!*", "src" ]

• !* 表示应排除所有内容。因此，只有将 src 文件夹保留下来。

npm publish

• 此命令需要通过 npm login 登录 NPM。发布时，必须在 package.json 文件中指定 version。

很高兴能帮到您。