npm 包 @averjs/babel-preset-app 使用教程

简介

@averjs/babel-preset-app 是一款适用于前端开发的 Babel 预设包，它基于 @babel/preset-env，增加了对一些常用特性的支持，如 JSX，TypeScript，Flow 等，并且内置对 Vue 和 React 的支持。该预设包适用于使用 Aver.js 作为工具链的项目。

安装和使用

安装

在项目目录中使用以下命令安装 @averjs/babel-preset-app：

npm install --save-dev @averjs/babel-preset-app

使用

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
    "presets": [
        "@averjs/babel-preset-app"
    ]
}

支持的特性

JSX

支持 JSX 语法的编译，使用了 @babel/plugin-transform-react-jsx 插件。

import React from 'react';

const App = () => {
    return <div>Hello World!</div>;
};

export default App;

TypeScript

支持 TypeScript 的编译，使用了 @babel/preset-typescript 和 @babel/plugin-transform-typescript 插件。

const add = (a: number, b: number): number => {
    return a + b;
};

console.log(add(1, 2));

Flow

支持 Flow 的编译，使用了 @babel/preset-flow 和 @babel/plugin-transform-flow-strip-types 插件。

// @flow

const add = (a: number, b: number) => {
    return a + b;
};

console.log(add(1, 2));

Vue

支持 Vue 单文件组件的编译，使用了 vue-template-compiler 和 @babel/plugin-transform-vue-jsx 插件。

-- -------------------- ---- -------
----------
    ------- ------- --------
-----------

------- ----------
------ - --------------- - ---- ------

------ ------- -----------------
    ------ -
        ------ -
            -------- ------ -------
        --
    -
---
---------

React

支持 React 的编译，使用了 @babel/preset-react 和 @babel/plugin-transform-react-jsx 插件。

import React from 'react';

const App = () => {
    return <div>Hello World!</div>;
};

export default App;

结论

@averjs/babel-preset-app 是一款非常好用的 Babel 预设包，它支持众多前端开发中常用的特性，使用起来非常方便。如果你正在使用 Aver.js 作为工具链，那么可以考虑使用该预设包进行项目开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/127503