如何将编译后的文件保存在单独的目录中？

一个包含 HTML、CSS、JavaScript、图像和视频文件的 Web 项目。任务是确保项目的所有文件都被编译并直接捆绑到一个单独的文件中。在我们继续之前，我想给你一个简单的介绍parcel-bundler 。

Parcel-bundler：它是一个帮助将我们的 ES6+ 语法转录为所有浏览器引擎都可读的传统 JavaScript 的模块。此外，它有助于将我们的 HTML 文件、CSS 文件和 JavaScript 文件捆绑到一个名为“dist”的目录中。这样我们就可以将编译后的文件放入一个文件夹中。

在parcel-bundler的帮助下，我们可以通过简单地将parcel-bundler模块安装到我们的项目中来实现这一点。下面解释的步骤将引导到最后将编译的文件保存在单独的目录中。

先决条件：需要 node.js，在 Windows 上安装 Node.js 或在 Linux 上安装 Node.js。

步骤 01：在您的项目中初始化 npm。
```
npm init
```
步骤 02：从节点注册表安装parcel-bundler
```
npm install parcel-bundler
```
步骤 03：打开您的package.json文件并对您的脚本对象进行以下更改（将以下代码添加到您的脚本对象）。
```
"scripts":{
    "dev": "parcel index.html",
    "build": "parcel build index.html",
    "watch": "parcel watch index.html"
    }
```
index.html是 HTML 文件，HTML 文件的路径取决于您的代码结构，例如 /src/tem/index.html ，其中包含我们要转录并编译到一个目录的外部 JS 和外部 CSS。如果您有多个 HTML 文件，只需将index.html替换为*.html 。 dev密钥通常用于在项目仍处于开发阶段时运行您的项目，而build密钥位于脚本对象中：build 密钥有助于在靠近 parcel 关键字的 build 关键字的帮助下构建您的项目以进行生产。当您不断更改代码时， watch键有助于使您的项目保持自动转录和捆绑。
步骤 04：在开发阶段运行您的项目。
```
npm run dev
```
步骤 05：让您的项目在仍处于开发阶段时持续关注任何变化
```
npm run watch
```
步骤 06：运行您的项目进行生产。
```
npm run build
```
输出：构建项目后，您应该看到一个名为“dist”的新文件夹，该文件夹包含现在可以用于生产的所有编译文件。

下面的示例说明了整个步骤：
例子：

步骤01：创建一个名为“GFG”的文件夹。
步骤 02：在所需的 IDLE 或 IDE 中打开文件夹。

步骤 03：在文件夹中创建一个名为“codeTrans.html”的 html 文件，并将以下 html 代码插入到 html 文件中。



  

    
    
    
    GeeksforGeeks | Transcribed JS to dir

  

    
        GeeksforGeeks
        
            With geeksforgeeks, we wish to keep
            changing the difficulties in tech 
            into berry-pies ?

步骤 04：在“GFG”文件夹中创建一个 JavaSCript 文件并将其命名为“js.js”。将以下代码添加到 javascript 文件中。

const geeks = () =>{
    const btn = document.querySelector('button');
      const para = document.querySelector('p');
      btn.addEventListener('click', () => {
        para.textContent +=
          '.GeeksforGeeks A Computer Science Portal';
      });
}
geeks();

步骤 04：转到您的package.json文件并在脚本对象中添加以下代码。

"dev": "parcel index.html",
"build": "parcel build codeTrans.html",
"watch": "parcel watch codeTrans.html"

步骤 05：要将编译后的文件放到一个目录中，请打开 IDE 终端并运行以下代码。
```
npm run build
```
输出：一个名为“dist”的新文件夹保存已编译文件。