react 入门-Babel

Posted 2022-08-01 teamlet

很多计算机语言在运行的时候，需要把我们编写的源代码编译成计算机底层的语言；

而javascript是解释型语言，浏览器接收javascript文本，然后再解释执行，所以在编写javascript代码之后，浏览器可以直接识别这些文本，不需要再编译javascript文本。

但是，随着javascript的不断更新和版本升级，新的语法和特性越来越多。这些语法提供了更好的性能、编程体验和开发风格，浏览器对这些新的语法和特性的跟随是非常滞后的，也就是说，新的javascript的特性无法直接使用。

这就是 babel 出现的背景。

javascript的版本包括ES3、ES5、ES6还有ES7，不是所有的浏览器都支持所有的这些版本。

为了能让开发者在新版本的javascript出现后，使用最新的javascript版本，babel 出现了。

babel 允许开发者使用最新的javascript版本和新语法开发应用。它可以把最新的语法转换成当前所有浏览器都可以支持的语法。

比如，现在可以使用ES6甚至ES7的新语法，当然还有 React JSX的语法进行编程，使用 babel 将这些语法转换成当前浏览器都可以支持的 ES5 的语法。

上篇文章中是在浏览器直接引用babel：

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

然后，将JSX的javascript代码写在 type 为 text/babel 的script标签内：

<script type="text/babel">
function formatName(user) 
  return user.firstName + ' ' + user.lastName;


const user = 
  firstName: 'Harper',
  lastName: 'Perez'
;

const element = (
  <h1>
    Hello, formatName(user)!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

产品模式下，不适合使用这种方法。

babel 还可以在 webpack 等工具中以 loader 的方式提供转换。