前端开发的演变🌻：框架中的 WebPack、Babel 和构建步骤是什么。

近年来，网络取得了多项进步，在这篇文章中，我将讨论我认为对我们今天的网站建设方式产生重大影响的工具。

请注意，本文并非旨在教授或帮助您设置这些工具。本文仅介绍并概括介绍它们的功能及其作用。如需了解更多信息，您可以查看它们各自的文档。

让我们讨论一下基本的网络！

这就是我们建立小型网站的方式，对吧？我们的浏览器可以理解这一点，而不需要任何外部工具。

<html>
<body>
  <p>Hello!</p>

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

长期以来，这一直运行良好！那么出了什么问题呢？

网站变得越来越大，越来越动态，因此 JavaScript 的责任也越来越大。

可维护性问题

现在想象一下这样的代码：

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

  <script src="./jquery.js"></script>
  <script src="./helpers.js"></script>
  <script src="./main.js"></script>
</body>
</html>

// main.js
const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

等等等等，isURLfunction 是从哪儿冒出来的？even 又是什么$？

想象一下，如果你有多个类似的脚本，然后发现其中一个函数有问题。你该如何找到并调试这个函数呢？

这最终会导致巨大的混乱，所以我们需要一个更具可扩展性的解决方案。

让我们看一下这个代码：

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

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

// main.js
import $ from 'jquery';
import { isURL } from './helpers.js'

const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

该代码变得更具可读性和可维护性。

但是，浏览器不理解此代码，因此我们需要一种方式来编写此代码，并最终输出浏览器可以理解的代码。

这就是 Webpack 所做的！

现在我们确实有JavaScript 原生模块。然而，webpack 提供了额外的功能，比如将脚本打包成单个文件、从模块导入 CSS 和其他类型的文件，以及许多其他功能。

查看Webpack 入门指南

太棒了！所以 webpack 为我们提供了一种编写更易于维护的调制代码的方法。

我们遇到的下一个问题是浏览器兼容性。

浏览器兼容性问题

不同的浏览器使用不同的 JavaScript 引擎。它们的行为各不相同，而且老旧的浏览器引擎无法理解新发布的 JavaScript 语法。

2015年，JavaScript 的新版本（ES6）发布，其中包含许多该语言所必备的功能。然而，这些功能在旧版浏览器中无法使用。

来自Babel 的文档-

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中向后兼容的 JavaScript 版本。

因此，以下是 ES2020 版本的代码：

a = undefined ?? 1

变成这样-

a = undefined != null ? undefined : 1

JavaScript 框架/库

如前所述，当今的网络更加动态，因此 JavaScript 承担着更多的责任。

我们只需将 jQuery 包含在脚本中就可以使用它，对吗？

<body>
  <h1>Hello</h1>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>

那为什么我们不使用 React、Vue 和其他框架来做到这一点呢？

有趣的事实！我们实际上可以将它们与 CDN 一起使用。
例如，我们可以使用以下方式将 React 与 CDN 结合使用：

<html>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script type="text/babel">
  function App() {
    return(
      <div>Hello</div>
    );
  }

  ReactDOM.render(<App/>, document.querySelector('#root'));
  </script>
</body>
</html>

好的，但是为什么我们不这样使用它呢？

当今的框架建议采用额外的构建步骤，以便进行优化并提供更好的控制。

大多数 JavaScript 框架在开发和构建过程中都以某种方式使用 webpack、Babel 或它们的等效工具。

除了捆绑之外，框架还利用 webpack 和 babel 插件提供额外的功能。

例如，Vue使用名为vue-loader的 webpack 插件来处理单文件组件。

Babel 除了能够将代码转换为向后兼容的版本之外，还能转换不同的语法。对于React来说，Babel 会将其转换JSX为React.createElement调用。

所以，这-

function App() {
  return (
    <div>Hello</div>
  )
}

变成-

function App() {
  return React.createElement('div', null, 'Hello');
}

在之前的 CDN 上的 React 示例中，这一步发生在前端，而在这里，这一步发生在npm run build。

查看Babel 插件列表。

感谢您阅读这篇文章🌻

此外，在文章中，我只提到了 webpack，因为它很流行，但还有其他替代方案，如Parcel、Rollup以及更多执行类似操作的工具。

最后，我们的需求在变化，工具和语言也在变化，在这个时代体验这些工具和库使我们的生活变得更轻松，这真是令人兴奋。

非常感谢所有维护和贡献这些令人惊叹的项目的人们<3

你还知道哪些你认为已经改变了网络的工具？欢迎在评论区留言。

链接：https://dev.to/saurabhdaware/the-evolution-of-frontend-development-what-is-webpack-babel-and-build-steps-in-frameworks-3gj2