写文章
  1. 码农之家首页
  2. 前端教程

13-框架-构建工具

我心飞翔 • • 前端教程 • 阅读 5

前言

      在现代 Web 前端开发中，构建工具已经成为必不可少的一环。在众多的前端构建工具中，Rollup、Webpack、Vite 和 TurboPack 则是最常用的四个，它们分别具有不同的优势和适用场景，在不同的项目中都能够带来更好的开发体验和效率提升。

      本文将从介绍这四种构建工具的基础知识开始，深入讲解它们的使用方法，并结合实际项目示例，帮助读者更好地了解它们的使用场景和优劣势。最后还会对它们进行一些总结和比较，以便读者能够更清晰地了解它们各自的特点和适用场景。

一、Rollup

1.1 Rollup 简介

      Rollup 是一款 JavaScript 模块打包器，它的主要目标是针对 ES6 模块化规范进行优化打包，生成高效的代码。相比于其他打包工具，如 webpack，Rollup 更加注重于打包结果的体积和性能优化，因此适合用于开发纯粹的库或组件，以及对代码大小和性能有较高要求的项目。

1.2 Rollup 的安装和使用

安装 Rollup 可以使用 npm 进行安装：

npm install --global rollup

安装完成后，我们可以在命令行中使用 rollup 命令来打包项目：

rollup src/index.js --file dist/bundle.js --format es

上面的命令表示将 src 目录下的 index.js 文件打包成一个 ES6 模块格式的 bundle.js，然后存放在 dist 目录下。

1.3 示例代码

下面是一个示例代码，演示了如何使用 Rollup 进行打包操作。假设我们有以下项目结构：

- src/
  - index.js
  - utils/
    - format.js
- dist/

index.js 代码如下：

import { format } from './utils/format.js';

console.log(format('hello'));

format.js 代码如下：

export function format(str) {
  return `formatted: ${str}`;
}

然后在命令行中执行以下命令即可进行打包：

rollup src/index.js --file dist/bundle.js --format es

最终生成的 bundle.js 代码如下：

function format(str) {
  return `formatted: ${str}`;
}

console.log(format('hello'));

二、Webpack

2.1 Webpack 简介

      Webpack 是一个打包工具，它不仅支持 JavaScript 模块打包，还支持样式、图片、字体等资源的打包处理。Webpack 提供了丰富的插件和 loader，使得开发者可以通过编写配置文件，并使用这些插件和 loader，来完成各种复杂的打包需求。相比于 Rollup，Webpack 更加注重于灵活性和扩展性，可以适用于各种类型的项目。

2.2 Webpack 的安装和使用

安装 Webpack 可以使用 npm 进行安装：

npm install --global webpack

安装完成后，我们可以在命令行中使用 webpack 命令来打包项目：

webpack src/index.js dist/bundle.js

上面的命令表示将 src 目录下的 index.js 文件打包成一个 bundle.js，然后存放在 dist 目录下。

2.3 示例代码

下面是一个示例代码，演示了如何使用 Webpack 进行打包操作。假设我们有以下项目结构：

- src/
  - index.js
  - style.css
- dist/

index.js 代码如下：

import './style.css

style.css 代码如下：

body {
  background-color: #f5f5f5;
}

webpack.config.js 代码如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

然后在命令行中执行以下命令即可进行打包：

webpack --config webpack.config.js

最终生成的 bundle.js 代码如下：

(function(module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ "./src/style.css");
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_css__WEBPACK_IMPORTED_MODULE_0__);

console.log('Hello Webpack');

/***/ }),

/***/ "./src/style.css":
/*!************************!*\
  !*** ./src/style.css ***!
  \************************/
/***/ (function(module, exports, __webpack_require__) {

var api = __webpack_require__(/*! ../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
var content = __webpack_require__(/*! !../../node_modules/css-loader/dist/cjs.js!./style.css */ "./node_modules/css-loader/dist/cjs.js!./src/style.css");
...

三、Vite

3.1 Vite 简介

      Vite 是一款基于浏览器原生 ES 模块系统的构建工具，它通过利用浏览器原生的模块化特性，实现了开发过程中快速冷启动和实时热更新的能力。相比于传统的打包工具，Vite 在开发环节中的表现更为优秀，因此适合用于开发阶段。前几天Vite4.3已经正式发布，性能方面也有了很大程度的提升。

3.2 Vite 的安装和使用

安装 Vite 可以使用 npm 进行安装：

npm install --global vite

安装完成后，我们可以在命令行中使用 vite 命令来启动项目：

vite

上面的命令表示启动一个默认配置的 Vite 项目，然后可以在浏览器中访问 http://localhost:3000 进行开发调试。

3.3 示例代码

下面是一个示例代码，演示了如何使用 Vite 进行开发操作。假设我们有以下项目结构：

- index.html
- src/
  - main.js
  - style.css

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vite App</title>
    <link rel="stylesheet" href="./src/style.css">
  </head>
  <body>
    <h1 id="app"></h1>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

main.js 代码如下：

import { format } from './utils/format.js';

document.getElementById('app').innerText = format('hello');

format.js 代码如下：

export function format(str) {
  return `formatted: ${str}`;
}

style.css 代码如下：

body {
  background-color: #f5f5f5;
}

然后在命令行中执行以下命令即可启动项目：

vite

最终生成的 index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vite App</title>
    <link rel="stylesheet" href="/src/style.css?import">
  </head>
  <body>
    <h1 id="app">formatted: hello</h1>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

四、TurboPack

4.1 TurboPack 简介

      TurboPack 是一款开源的构建工具，它的目标是提供一种灵活、高效的打包体验，同时支持多种前端框架和库的开发。TurboPack 采用了类似于 Vite 的基于浏览器原生 ES 模块系统的开发模式，并且通过预先编译所有依赖模块，实现了更快的启动速度和更小的代码体积。

4.2 TurboPack 的安装和使用

安装 TurboPack 可以使用 npm 进行安装：

npm install --global @turbo-pack/cli

安装完成后，我们可以在命令行中使用 turbo-pack 命令来启动项目：

turbo-pack dev

上面的命令表示启动一个默认配置的 TurboPack 项目，然后可以在浏览器中访问 http://localhost:3000 进行开发调试。

4.3 示例代码

下面是一个示例代码，演示了如何使用 TurboPack 进行开发操作。假设我们有以下项目结构：

- index.html
- src/
  - main.js
  - components/
    - Hello.vue

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>TurboPack App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

main.js 代码如下：

import { createApp } from '@vue/runtime-dom';
import Hello from './components/Hello.vue';

createApp(Hello).mount('#app');

Hello.vue 代码如下：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, TurboPack!'
      };
    }
  };
</script>

然后在命令行中执行以下命令即可启动项目：

turbo-pack dev

最终生成的 index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>TurboPack App</title>
  </head>
  <body>
    <div id="app"><div>Hello, TurboPack!</div></div>
    <script type="module" src="./assets/index.992d13cf.js"></script>
  </body>
</html>

五、总结与比较

      从上面的示例代码可以看出，四种构建工具的使用方法和语法都有所不同，但它们都能够实现将多个模块打包成一个浏览器可用的文件，并且支持各种类型的资源打包处理。下面我们将对这四种构建工具进行一些总结和比较。

5.1 Rollup

      Rollup 是一款注重于体积和性能优化的 JavaScript 模块打包器，适合用于开发纯粹的库或组件，以及对代码大小和性能有较高要求的项目。相比于其他打包工具，Rollup 更加注重于生成高效的代码，并且能够进行 Tree Shaking 操作，从而消除未使用的模块和导出。

      Rollup 的配置相对简单，使用起来也较为容易。但它并不支持像 Webpack 和 Vite 那样的插件系统，因此在某些复杂的打包需求上可能会有所不足。

5.2 Webpack

      Webpack 是一款功能强大的打包工具，能够处理各种类型的资源，同时提供了丰富的插件和 loader，以满足各种复杂的打包需求。相比于 Rollup，Webpack 更加注重于灵活性和扩展性，可以适用于各种类型的项目。

      Webpack 的配置相对复杂，需要编写较多的配置文件和代码，使用起来也略显麻烦。但它的功能非常强大，能够满足各种复杂的打包需求，因此在大型项目中仍然是一个很好的选择。

5.3 Vite

      Vite 是一款基于浏览器原生 ES 模块系统的构建工具，通过利用浏览器原生的模块化特性，实现了开发过程中快速冷启动和实时热更新的能力。相比于传统的打包工具，Vite 在开发环节中的表现更为优秀，因此适合用于开发阶段。

      Vite 的配置相对简单，使用起来也非常方便。但它在生产环境下的表现并不理想，因为它缺乏像 Webpack 那样的优化和压缩功能。因此，在生产环境中，我们需要使用 Rollup 或 Webpack 等其他工具进行打包处理。

5.4 TurboPack

      TurboPack 是一款灵活、高效的打包工具，通过预先编译所有依赖模块，实现了更快的启动速度和更小的代码体积。同时，它还支持多种前端框架和库的开发，可以满足各种类型的项目需求。

      TurboPack 的配置相对简单，使用起来也很方便。但它目前还处于开发阶段，存在着不稳定性和不完备性。因此，在使用 TurboPack 进行项目开发时，需要注意它的局限性和潜在问题。

六、结论

      四种构建工具各有优劣，选择适合自己的工具取决于项目的需求和个人的偏好。如果是开发纯粹的库或组件，或者对代码体积和性能有较高要求，那么可以选择 Rollup；如果需要处理各种类型的资源，以及满足各种复杂的打包需求，那么可以选择 Webpack；如果需要在开发阶段快速启动和实时更新，那么可以选择 Vite；如果需要灵活、高效的打包工具，并且支持多种前端框架和库的开发，那么可以选择 TurboPack。

      无论选择哪种构建工具，在编写代码和配置时，都需要注意代码的质量和可维护性。同时，也需要考虑项目的规模和复杂度，以选择最适合自己的工具和方法。

原文链接：https://juejin.cn/post/7225760472557289530 作者：高灯GFE

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年4月25日 上午10:26
下一篇 2023年4月25日 上午10:36

相关推荐

发表回复

登录后才能评论