npm 包 babel-preset-normal-please 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 babel-preset-normal-please

babel-preset-normal-please 是一个由社区开发的 npm 包，旨在为前端开发者提供一个更快、更方便的构建 Javascript 应用的方式。它可以帮助开发者自动化许多重复的构建任务，并同时提供了一些便于开发和维护的工具和特性，例如支持 ES6、ES7、React 等语法。

如何安装

要安装 babel-preset-normal-please，你必须先 install node.js，然后打开命令行，输入以下命令：

npm i -D babel-preset-normal-please

如何使用

使用 babel-preset-normal-please 很简单。只要按照以下步骤即可：

创建 .babelrc 文件：

在你的工程项目根目录下创建 .babelrc 文件，它是 babel 的配置文件，用于配置转化 ES6 语法。内容如下：

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

其中，browsers、ie、modules 和 useBuiltIns 都是参数，对应不同的选项。例如，你可以使用 browserlist 来设置需要兼容的浏览器，以确保应用程序可以在大多数浏览器中运行。

在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "babel": "babel src --out-dir lib --source-maps inline",
    "build": "npm run babel"
  }
}

这将创建 2 个新的 npm 脚本。一个是 babel，用于将你的 ES6 代码转换为 ES5 代码；另一个是 build，用于将 JS 文件输出到 lib 目录中。

运行命令：

npm run build

现在，你已经成功地使用 babel-preset-normal-please 将 ES6 语法转化为 ES5 语法了。

示例代码

import React from 'react'
import ReactDOM from 'react-dom'

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

ReactDOM.render(<App />, document.getElementById('root'))

转化后：

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

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

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

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

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

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

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

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

最后

现在你已经学会了如何使用 babel-preset-normal-please 转化 ES6 语法，它可以极大地提高你的开发效率。如果您有任何问题或建议，请随时在评论区留言，我将竭诚为你解答。

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