打开浏览器的包 node_如何发布可在浏览器和Node中使用的软件包

打开浏览器的包 node

When you create a package for others to use, you have to consider where your user will use your package. Will they use it in a browser-based environment (or frontend JavaScript)? Will they use it in Node (or backend JavaScript)? Or both?

创建供其他人使用的软件包时，必须考虑用户将在何处使用您的软件包。 他们会在基于浏览器的环境(或前端JavaScript)中使用它吗？ 他们会在Node(或后端JavaScript)中使用它吗？ 或两者？

If you want to create a package that’s usable in both browsers and Node, this article is here to help.

如果您想创建一个在浏览器和Node中都可以使用的程序包，本文将为您提供帮助。

You’ll learn:

您将学到：

1. How to write packages for use in browsers

1.如何编写在浏览器中使用的包

2. How to write packages for use in Node

2.如何编写要在Node中使用的软件包

3. How to publish your packages for use in both browsers and Node

3.如何发布程序包以在浏览器和Node中使用

编写用于浏览器的软件包 (Writing a package for use in browsers)

If you want to include a library in frontend JavaScript, you have to link the library first with a script tag. You can use the library anytime after you link it.

如果要在前端JavaScript中包含库，则必须首先将库与script标签链接。 链接后，您可以随时使用该库。

<!-- This is html -->

<script src="link-to-jquery.js"></script>

<script>  // You can use jQuery anytime after you link to it  console.log(jQuery)</script>

This works because JavaScript in browsers shares one global scope. It doesn’t matter how many JavaScript files you link to. They behave as if they’re one big JavaScript file.

之所以可行，是因为浏览器中JavaScript共享一个全局范围。 链接到多少JavaScript文件无关紧要。 它们的行为就像是一个大JavaScript文件。

With this information, we can begin writing a library for use in the frontend world.

有了这些信息，我们就可以开始编写供前端世界使用的库了。

Let’s say you want to create a library called peachBlossom. peachBlossom has a bloom function. You write this bloom function in a separate JavaScript file, peach-blossom.js.

假设您要创建一个名为peachBlossom的库。 peachBlossom具有bloom功能。 您可以在单独JavaScript文件peach-blossom.js编写此bloom函数。

// This is js

// peach-blossom.jsfunction bloom () {  console.log('Bloom!')}

You can include peachBlossom in your frontend JavaScript by linking to the peach-blossom.js file. Once you do this, you can use bloom anywhere.

您可以通过链接到peach-blossom.js文件在前端JavaScript中包含peachBlossom 。 完成此操作后，您可以在任何地方使用bloom 。

<!-- This is html -->

<script src="peach-blossom.js"></script><script src="main.js"></script>

// This is js

// main.jsbloom() // Bloom!

Libraries usually have more than one piece of code. We don’t want to pollute the global scope with little variables. What we can do is wrap the functions we want to expose in an immediately-invoked function expression (IIFE).

图书馆通常有多个代码。 我们不想用很少的变量来污染全局范围。 我们可以做的是将要公开的函数包装在立即调用的函数表达式(IIFE)中。

This means:

这表示：

1. We create a function and run it immediately2. We return the library from within the function so we can use the library later.

1.我们创建一个函数并立即运行它。 我们从函数中返回库，以便以后使用。

In code, it looks somewhat like this:

在代码中，它看起来像这样：

// This is js

// peach-blossom.js const peachBlossom = (function () {  // Write as much code as you want here

// Return what others can use  return {    bloom: function () {      console.log('Bloom!')    }  }})()

You can then use bloom anywhere by writing peachBlossom.bloom.

然后，可以通过编写peachBlossom.bloom在任何地方使用bloom 。

// This is js

// main.jspeachBlossom.bloom() // Bloom!

This is the basics of writing a frontend library.

这是编写前端库的基础。

Now, let’s talk about writing a library for Node.

现在，让我们谈谈为Node编写一个库。

为Node编写一个包 (Writing a package for Node)

Adding a library to Node is different from adding a library to browsers. This is because Node doesn’t have HTML files and <script> tags.

向Node添加库与向浏览器添加库不同。 这是因为Node没有HTML文件和<scri pt>标签。

Let’s make sure you know how to run Node before we begin writing a library for Node.

在开始为Node创建库之前，请确保您知道如何运行Node。

运行节点 (Running Node)

First, you need to make sure you have Node installed on your computer. You can install Node from Node’s website if you don’t have it installed already.

首先，您需要确保在计算机上安装了Node。 如果尚未安装Node，则可以从Node的网站安装。

Once you have Node installed, you’ll want to create a folder to store your Node project. In this case, let’s call it “node-project”.

安装Node之后，您将要创建一个文件夹来存储Node项目。 在这种情况下，我们称其为“ node-project”。

The command to create a folder is this:

创建文件夹的命令是这样的：

# This is bash

mkdir node-project

Then, you need to navigate to the node-project directory. You can do it with cd:

然后，您需要导航到node-project目录。 您可以使用cd来做到这一点：

# This is bashcd node-project

If you’re having problems with the command line, you can use this guide to help you out.

如果您在命令行方面遇到问题，则可以使用本指南为您提供帮助。

Next, we want to create a file. This will be a JavaScript file. (We will run Node on this file). Let’s call it index.js.

接下来，我们要创建一个文件。 这将是一个JavaScript文件。 (我们将在此文件上运行Node)。 我们称之为index.js 。

# This is bash

touch index.js

In index.js, we’re going to write a console.log statement. This is for us to know if we run the file.

在index.js ，我们将编写一个console.log语句。 这是为了让我们知道是否运行文件。

// This is js

// index.jsconsole.log('Running index.js!')

Finally, you can use node to run index.js. Here’s the command:

最后，您可以使用node运行index.js 。 这是命令：

# This is bash

node index.js

Once you run index.js, you should see the console.log in the terminal. That’s how we know the file has run.

一旦运行index.js ，您应该在终端中看到console.log 。 这就是我们知道文件已运行的方式。

将库添加到Node (Adding libraries to Node)

To add libraries to Node, you have to use the require statement. Once you add a library, you can use the library anywhere in the same JavaScript file.

要将库添加到Node，必须使用require语句。 添加库后，您可以在同一JavaScript文件中的任何位置使用该库。

Here’s an example:

这是一个例子：

// This is js

const fs = require('fs')console.log(fs)

When you use require, Node looks for the library you specified in three places:

当使用require ，Node在三个位置查找您指定的库：

First, it checks whether the library is built into Node. In this example, fs is built directly into Node. You can use fs anytime if you use Node.

首先，它检查该库是否内置在Node中。 在此示例中， fs直接内置在Node中。 如果使用Node，则可以随时使用fs 。

Second, it checks whether the library exists in the node_modules folder. These are user-installed libraries. You can add a library to the node_modules folder by running npm install.

其次，它检查该库是否存在于node_modules文件夹中。 这些是用户安装的库。 您可以通过运行npm install将库添加到node_modules文件夹中。

Here’s an example where we install express, then require express in Node:

这是我们安装express ，然后在Node中要求express的示例：

# This is bash

# Run this in the command linenpm install express

// This is js

// Index.js const express = require('express')console.log(express)

Third, if you add ./ to require, Node will look for a file located in the current directory. This is where we can begin writing the peach-blossom library.

第三，如果您添加./到require ，Node将在当前目录中查找文件。 这是我们开始编写peach-blossom库的地方。

为Node编写第一个库 (Writing your first library for Node)

Let’s start by creating a peach-blossom.js file. This file should be in the same directory as index.js.

首先创建一个peach-blossom.js文件。 该文件应与index.js在同一目录中。

// This is js

touch peach-blossom.js

We can add peach-blossom.js to index.js by using require. Here’s what it looks like:

我们可以通过使用require将peach-blossom.js添加到index.js 。 看起来是这样的：

// This is js

const peachBlossom = require('./peach-blossom')

In Node, there’s no concept of a shared global scope. Each file has its own scope. So, if you write peach-blossom.js as if it’s used for frontend JavaScript, you won’t be able to use it. You’ll get an error.

在Node中，没有共享全局范围的概念。 每个文件都有其自己的范围。 因此，如果您将peach-blossom.js为好像用于前端JavaScript，则将无法使用它。 您会得到一个错误。

// This is js

// peach-blossom.js const peachBlossom = (function () { // Write as much code as you want here

// Return what others can use return { bloom: function () { console.log(‘Bloom!’) } }})()

// This is js

// index.js const peachBlossom = require(‘./peach-blossom’)

To pass variables from one file to another in Node, you have to write module.exports. Variables passed to module.exports can be retrieved from another file.

要将变量从Node中的一个文件传递到另一个文件，必须编写module.exports 。 传递给module.exports变量可以从另一个文件中检索。

This means we must write module.exports in peach-blossom.js.

这意味着我们必须写module.exports在peach-blossom.js 。

// This is js

// Write as much code as you want here const peachBlossom = { bloom () { console.log(‘Bloom!’) }}

// Exports peachBlossom for use in other filesmodule.exports = peachBlossom

Once we have exported peachBlossom, we can use it in other files:

导出peachBlossom ，可以在其他文件中使用它：

// This is js

// index.js const peachBlossom = require('./peach-blossom')peachBlossom.bloom() // Bloom!```

This format of passing variables around in Node with require and module.exports is called CommonJS.

在Node中使用require和module.exports传递变量的这种格式称为CommonJS 。

将库发布为npm软件包 (Publishing your library as an npm package)

In short, to make your module work in Node, you have to export a variable with module.exports. Other people can then require this module in their code.

简而言之，要使模块在Node中工作，必须使用module.exports导出变量。 然后其他人可以在其代码中require此模块。

At this point, you can move peach-blossom into a separate project folder and publish it as an npm package. You can use this guide to find out more about publishing the process.

此时，您可以将peach-blossom移到一个单独的项目文件夹中，并将其作为npm软件包发布。 您可以使用本指南查找有关发布流程的更多信息。

编写可在前端和后端JavaScript中使用的模块 (Writing modules that are usable in both frontend and backend JavaScript)

Let’s take a moment to reconcile what we know.

让我们花一点时间来调和我们所知道的。

To write a library for the frontend, we need to declare it as a variable. As much as possible, we want to expose one variable only.

要为前端编写库，我们需要将其声明为变量。 我们尽可能只公开一个变量。

// This is js

const peachBlossom = (function () {  // Write as much code as you want here

// Return what others can use  return {    bloom: function () {      console.log('Bloom!')    }  }})()

To write a library for the Node, we need to export the variable with module.exports. Here, we only expose one variable.

要为Node编写一个库，我们需要使用module.exports导出变量。 在这里，我们只公开一个变量。

// This is js// Write as much code as you want here const peachBlossom = {  bloom () {    console.log('Bloom!')  }}

// Exports peachBlossom for use in other filesmodule.exports = peachBlossom

But these are two completely different formats! How can we write a library once and use it in both contexts?

但是，这是两种完全不同的格式！ 我们如何编写一次库并在两种情况下使用它？

Enter UMD.

输入UMD。

UMD (UMD)

UMD (Universal Module Definition) is a block of code we can use to wrap around our library. This block of code makes it possible to use a library both on the frontend and in Node.

UMD(通用模块定义 )是我们可以用来包装我们库的代码块。 此代码块可以在前端和Node中使用库。

It kinda looks like this:

看起来像这样：

// This is js

(function (root, factory) {    if (typeof define === 'function' && define.amd) {        // AMD. Register as an anonymous module.        define(['b'], factory);    } else if (typeof module === 'object' && module.exports) {        // Node.        module.exports = factory(require('b'));    } else {        // Browser globals (root is window)        root.returnExports = factory(root.b);    }}(typeof self !== 'undefined' ? self : this, function (b) {    // Use b in some fashion.

// Just return a value to define the module export.    // This example returns an object, but the module    // can return a function as the exported value.    return {};}));

Whoa! This is confusing! Hold up!

哇！ 这很混乱！ 耽误！

In practice, we don’t have to know how to UMD-ify our code by ourselves. Many tools, like Webpack and Parcel, gives us the ability to UMD-ify our code through them.

在实践中，我们不必知道如何自己对UMD修改代码。 Webpack和Parcel等许多工具使我们能够通过它们进行UMD修改代码。

Here are some examples (and their relevant setup instructions):

以下是一些示例(及其相关的设置说明)：

1. Gulp-umd2. Webpack3. Parcel4. Rollup

1. Gulp-umd 2. Webpack 3. Parcel 4. 汇总

This, means you have to set up these tools if you want to write packages that can be used for both Frontend JavaScript and in Node. Yes, it complicates the authoring process, but there’s nothing much we can do about it at this point.

这意味着，如果要编写可用于前端JavaScript和Node中的程序包，则必须设置这些工具。 是的，这使创作过程复杂化，但是目前我们无能为力。

结语 (Wrapping up)

If you want your library to work both on Frontend JavaScript and in Node, you need to wrap your module with UMD (Universal Module Definition).

如果希望您的库在前端JavaScript和Node上都能工作，则需要使用UMD(通用模块定义)包装模块。

If you want to UMD-ify your code, you need to use a build tool when you author your package. This makes the authoring process more complicated. But the tradeoff can be worth it for providing users with an option to use your library anywhere.

如果要UMD修改代码，则在编写程序包时需要使用构建工具。 这使创作过程更加复杂。 但是，权衡取舍是值得的，因为它为用户提供了在任何地方使用您的库的选项。

This article was originally posted on my blog.Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初发布在我的博客上。如果您想要更多文章来帮助您成为更好的前端开发人员，请注册我的新闻通讯 。

翻译自: https://www.freecodecamp.org/news/how-to-publish-packages-that-can-be-used-in-browsers-and-node-c51274dca77c/

打开浏览器的包 node