使用NodeJS和Parcel，可以实现JavaScript的实时调试

2 年 ago

韵, 科

1 minute

首先

最近开始学习TextAliveAppAPI，现在已经掌握了如何使用API。然而，由于执行环境仍然是示例的状态，让我感觉有些不舒服。因此，这次我尝试自己搭建环境，经历了一番困难后，终于搞懂了。我想把这个过程总结成文章。

TextAliveAppAPIの開発環境を自前で作りたい人

这篇文章适用于已经完成了nodeJS的安装并且可以使用npm命令的人。同时，它会介绍从零开始构建JavaScript环境的步骤。它还会介绍如何设置与TextAliveAppAPI相同的开发环境。请注意，本文作者的执行环境是Windows10。

javascriptのデバッグがタイムリー（保存→自動で反映）に行える

在NodeJS上安装parcel并从parcel启动文件。

实际上，笔者对于parcel的了解并不太多((+_+))。然而，在parcel的官方网页上，有以下的描述。

Parcel 会根据开发时所做的更改，在浏览器上自动更新模块。而且，无需进行任何设置。

换言之，这意味着它可以自动更新开发时的修改内容。例如，假设在Chrome上进行结果确认，那么JavaScript的变更将立即反映在Chrome上。这太令人感动了。

参考
※ Parcel 是一个惊人地快速、无需设置的 Web 应用程序打包工具。

首先，让我们在NodeJS上安装Parcel。输入以下代码，即可完成安装。

请全局安装parcel-bundler：
npm install -g parcel-bundler

参考
※首先，”PARCEL”

在开发目录中，让我们来初始化一个nodeJS项目。请执行以下命令。现在生成了一个名为package.json的文件。

使用中文将以下内容转述为自然语言大概意思：运行 npm init -y 命令。

参考：【包裹】首先

请在开发目录下创建index.html和index.js文件。这是在使用Parcel进行调试时所需的最基本的文件。另外，请确保在index.html中调用index.js文件，如下所示。如不在index.html中调用index.js，将无法启动自动更新和反映※２。

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

参考
※１包裹起始
※２如果 index.html 是唯一的文件，Parcel 不会实时重新加载浏览器 #2557

诚实地说，不做这个步骤也没关系，但为了与TextAliveAppAPI的开发环境保持一致，我们选择了它。
在nodeJS中，有一个名为npm run 的命令，可以执行特定的命令。这次我们想用它来调用parcel。
首先，打开package.json文件，将script标签的内容修改为以下内容。

"scripts": {
  "dev": "parcel index.html"
},

参考
※前端开发的三个步骤（开始使用npm）构建命令是 npm run

准备好了。请输入以下命令并执行。可能会在默认服务器上启动http://local:1234，您可以使用chrome或其他浏览器打开它。
然后！当您编辑保存index.html或index.js时，浏览器也会自动更新！这将大大提高开发效率。

运行npm的开发模式

我是一个才刚开始接触nodeJS不到10天的作者。我想用nodeJS来编辑index.html等文件，并进行调试。我不知道使用parcel可以如此轻松。如果这篇文章有任何错误，请在评论中指出，我会非常感激。我会继续努力的！那就这样吧！