npm 包 builder-alinw 使用教程

builder-alinw 是阿里云前端团队针对前端项目构建的一款工具类 npm 包。它优化了 webpack 和 dev-server 的配置，提高了项目的构建速度，也支持 hot-reload 实时预览，方便前端开发人员调试项目。

安装

builder-alinw 是一个 npm 包，需要使用 npm 命令安装：

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

安装完成后，在项目中引入包：

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

使用

命令行参数

builder-alinw 提供了一些命令行参数用于配置和运行项目构建：

  • --entry：入口文件路径，默认为项目根目录下的 src/index.js
  • --output：输出文件路径，默认为项目根目录下的 dist/
  • --port：dev-server 的启动端口，默认为 3000
  • --host：dev-server 的启动地址，默认为 localhost
  • --publicPath：静态资源的访问路径，默认为 /
  • --proxy：dev-server 的代理设置，用于解决跨域问题
  • --externals：选项用于将子文件中的 variable 在父文件中转普=`换

配置文件

builder-alinw 还支持使用配置文件（.builderrc 或者 .builderrc.js），文件需要放在项目根目录下。配置文件的格式是 JSON 或者 JavaScript，示例如下：

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

API

builder-alinw 还支持使用 API 调用的方式启动项目构建，示例如下：

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

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

示例代码

下面是一个基本的使用示例：

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

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

启动命令：

-------

总结

builder-alinw 提供了一个简单易用、高效快速的前端项目构建工具。通过本文的介绍，相信大家已经可以使用 builder-alinw 并进行一些简单的配置了。后续，我们可以根据现有配置进行自定义配置，达到更好的效果。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8dccdc64669dde5551

阅读全文

猜你喜欢

  • Buddy-Plugin-PostCSS 使用教程

    前言 在前端开发中，CSS 是一个非常重要的技术，而 PostCSS 是 CSS 后处理工具中的佼佼者，可以帮我们提高 CSS 的编写效率，降低代码的维护成本。Buddy-Plugin-PostCSS...

    4 年前
  • npm 包: buddy-plugin-twig 使用教程

    在前端开发中，我们常常需要使用到一些插件和库来实现一些功能。而 npm 包则是最常用的前端插件和库管理工具。在本文中，我们将介绍一个名为 buddy-plugin-twig 的 npm 包，以及它的使...

    4 年前
  • npm 包 buddy-plugin-typescript 使用教程

    在前端开发中，TypeScript 是越来越受欢迎的静态类型语言。使用 TypeScript 可以大幅提高代码的可读性和可维护性，使开发过程更加流畅和高效。而在实际的开发中，我们通常需要将 TypeS...

    4 年前
  • npm 包 buddy-server 使用教程

    简介 buddy-server 是一个用于快速搭建本地服务器的 npm 包。它提供了简单易用的 API，以便于开发者快速创建本地服务器，并进行调试或开发工作。 安装 安装 buddy-server 非...

    4 年前
  • npm 包 bundle-bindings 使用教程

    在前端开发中，经常会使用 npm 包来加速开发和提高效率。其中，bundle-bindings 是一个非常实用的 npm 包，可以将多个 JavaScript 文件打包成一个文件。

    4 年前
  • npm 包 buildebooks 使用教程

    随着前端技术的发展，越来越多的人开始关注如何将自己的文档或教程制作成漂亮的电子书，并且方便地在不同设备上进行阅读。npm 包 buildebooks 能够帮助我们快速地生成电子书，并且支持多种格式输出...

    4 年前
  • npm 包 buildcmts 使用教程

    前言 在开发前端项目时，我们经常需要使用许多库和框架来辅助我们完成各种功能。而在项目中，我们经常会使用到类似于评论、点赞、分享等常见功能，这时我们就可以考虑使用 buildcmts 这个 npm 包来...

    4 年前
  • npm 包 buildcs 使用教程

    什么是 buildcs？ buildcs 是一个适用于前端项目的 npm 包，它可以帮助你在构建项目时自动化地添加、生成和更新一些常用的配置和文件，比如 eslint 配置、风格格式化配置、Jest ...

    4 年前
  • npm 包 bundle-less 使用教程

    bundle-less 是一款基于 Node.js 的插件，用于将多个 .less 文件打包成一个文件，从而减少网页加载时间和网络传输。其使用非常简单，只需要安装并配置好程序之后，在相关的项目中引用即...

    4 年前
  • npm 包 bundle-loader-easy 使用教程

    前言 在前端开发中，我们常常需要加载大型文件，例如图片、音频、视频等。这些文件可能会占用大量的网络带宽和内存，从而影响网站的性能表现。为了解决这个问题，我们通常会采用文件分块加载的策略。

    4 年前
  • npm 包 buster-rendr-functional-tests 使用教程

    如果你在进行 Rendr 应用程序开发并需要进行功能测试，你可以使用 buster-rendr-functional-tests npm 包。本文将介绍这个包的使用教程，包括设置、运行测试以及解决常见...

    4 年前
  • npm 包 buster-selenium 使用教程

    在前端开发中，我们经常需要进行自动化测试。而 selenium 是一个非常流行的自动化测试工具。buster-selenium 是一个基于 selenium 的 npm 包，可以帮助我们在测试中方便地...

    4 年前
  • npm 包 builder-builder 使用教程

    前言 在前端开发中，我们经常需要使用各种各样的库和工具。npm 是一个重要的包管理器，让我们轻松地安装和使用这些库和工具。在 npm 的包库中，有一个叫做 builder-builder 的包，它可以...

    4 年前
  • npm 包 builder-css-whitespace 使用教程

    前言 在前端开发中，CSS 是不可或缺的一部分。而在编写 CSS 时，为了代码的可读性、维护性等方面的考虑，通常需要进行格式化，比如空格、缩进等。但是，这些格式化的代码在传输过程中会增加文件大小，影响...

    4 年前
  • npm 包 url-trie 使用教程

    什么是 url-trie？ url-trie 是一个轻量级的 JavaScript 库，可以使用树形字典结构来快速匹配 URL 路径，可以在构建 Web 应用程序时使用。

    4 年前
  • npm 包 buddy-system 使用教程

    在前端开发中，我们往往需要处理大量的数据结构。而 Buddy System 是一种专门用于管理大规模内存分配的算法。在 JavaScript 开发中，我们可以通过使用 npm 包 "buddy-sys...

    4 年前
  • npm 包 buddy-tap 使用教程

    简介 buddy-tap 是一个用于测试 Node.js 应用程序和模块的轻量级测试工具。它基于 tap 和 puppy，可以使用基于 JavaScript 的测试语言编写测试用例。

    4 年前
  • npm 包 buddy-term 使用教程

    在前端开发中，经常会需要使用终端来运行一些命令，如启动本地服务器等。而使用终端的时候，界面相对比较简单，不太美观，因此可以使用 npm 包 buddy-term 来进行美化。

    4 年前
  • npm 包 buddybid-social-platform-sdk 使用教程

    介绍 npm 包 buddybid-social-platform-sdk 是一个用于社交平台开发的 JavaScript SDK，可以帮助开发者快速地接入社交平台，简化了很多开发工作。

    4 年前
  • @phenax/redux-utils 使用教程

    在现代前端技术中，使用了许多的库和框架来开发复杂的应用程序。其中，Redux 是一个非常受欢迎的 JavaScript 状态管理库，它提供了一个可预测的状态管理系统，使得开发者能够更加方便的管理组件之...

    4 年前

相关推荐

    暂无文章