在客户端javascript中使用browersify使用要求

介绍 (Introduction)

Have you ever had a moment when writing code, you are exporting and importing data into different files you have in a project? Everything is working properly and you want to show the results in the browser, but nothing is showing up? You open up the console only to end up with an error that says ReferenceError: require is not defined? Don’t you just hate that?!!!!

您是否曾经有一段时间编写代码，将数据导出和导入到项目中的不同文件中？ 一切正常，您想在浏览器中显示结果，但是什么都没显示？ 您打开控制台仅导致出现一个错误，该错误表示ReferenceError: require is not defined ？ 你不讨厌吗？!!!!

Introducing Browserify. It lets you use require() in the browser by bundling up the dependencies that you have in your program. I’ll show you how to use this extension for your projects.

介绍Browserify。 通过捆绑程序中的依赖项，它使您可以在浏览器中使用require()。 我将向您展示如何在您的项目中使用此扩展。

入门 (Getting Started)

First, you have to install browserify into your project. Type this into your terminal:

首先，您必须将browserify安装到您的项目中。 在您的终端中输入：

npm install -g browserify

The data I will be working with is a JSON file that I will import into a file I have called recommenderP.js.

我将与被处理的数据是JSON文件，我将导入到我所说的文件recommenderP.js 。

JSON File

JSON文件

Now I will require this data into my recommenderP.js file:

现在，我需要将这些数据放入我的recommenderP.js文件：

In order to display the results of this file to the browser, I will create an index.html file.

为了将这个文件的结果显示给浏览器，我将创建一个index.html文件。

When I open the index.html in the browser and open the console, this is the error I get:

当我在浏览器中打开index.html并打开控制台时，这是我得到的错误：

THAT ERROR I MENTIONED IN THE INTRODUCTION.

我在简介中提到了该错误。

However, browserify can fix this!!!!

但是，bro​​wserify可以解决此问题！！！！

In the project’s directory, we will run in our terminal:

在项目目录中，我们将在终端中运行：

browserify <nameOfYourJSFile> -o bundle.js

browserify <nameOfYourJSFile> -o bundle.js

Now it is done and you should see in your project’s file tree that there is a new file called bundle.js . What we will do now is replace the src path to point to that bundle.js instead.

现在完成了，您应该在项目的文件树中看到一个名为bundle.js的新文件。 现在，我们要做的是替换src路径以指向该bundle.js 。

Now, this is what we will see on the client-side:

现在，这是我们将在客户端看到的内容：

The result of my function was an object which had a book title property with the value of “The Selfish Gene” and that was what I wanted to be displayed. As you can see it worked!

我的功能的结果是一个对象，该对象的书名属性为“自私的基因”，这就是我想要显示的对象。 如您所见，它起作用了！

演示地址

结论 (Conclusion)

I hope that was helpful! I think browserify is a nice quick extension to use if you are working on a small project that you want to get working on the client-side right away! Check out their website for more information and documentation.

希望对您有所帮助！ 我认为，如果您要在客户端上进行小型项目，那么browserify是一个不错的快速扩展！ 查看他们的网站以获取更多信息和文档。

翻译自: https://medium.com/swlh/browersify-use-require-in-client-side-javascript-7414b229a4ad