npm 包 @alib/build-scripts 使用教程

简介

@alib/build-scripts 是一个构建工具集,包含多个插件,可以帮助前端开发者快速构建前端项目。@alib/build-scripts 已经在阿里巴巴内部广泛使用,在性能、体验等方面有较好的表现,值得尝试。

安装

使用 npm 安装:

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

快速上手

安装完成后,在项目的 package.json 中添加如下配置:

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

然后在项目的根目录下创建 src/index.js 文件。在文件中添加如下代码:

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

现在,在命令行中运行如下命令:

--- --- -----

在浏览器中打开 http://localhost:4444,你将会看到 Hello world! 的输出。

到这里,你已经完成了 @alib/build-scripts 的快速上手。接下来,我们将逐步深入了解这个构建工具集。

命令

start

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

使用 build-scripts start 命令启动开发服务器。在开发服务器中,你的代码将会实时编译并且重新加载。这是一个非常方便的功能,因为你无需手动编译代码或者手动刷新页面。

build

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

使用 build-scripts build 命令对代码进行构建,结果保存在 build 目录中。

配置文件

@alib/build-scripts 的配置文件是 build.json

下面我们来了解一些常用的配置项。

entry

entry 配置项指定入口文件。例如:

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

这将会将 src/index.js 作为入口文件进行编译

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedab49b5cbfe1ea06106e4


猜你喜欢

  • npm 包 build-plugin-ice-config 使用教程

    在前端开发中,我们经常会使用 build 工具来编译和打包我们的代码,因此很多开发者都能够熟练地使用一系列的 build 工具和插件。在这篇文章中,我将介绍如何使用 npm 包 build-plugi...

    4 年前
  • npm包 build-plugin-ice-core 使用教程

    介绍 build-plugin-ice-core 是一个用于修改 buildConfig 的 ice-scripts 插件。通过这个插件,你可以自定义冰体系项目的打包配置,从而满足你的项目需求。

    4 年前
  • npm 包 @antv/hierarchy 使用教程

    在前端开发中,数据可视化是一个十分重要的领域,而 @antv/hierarchy 是一个非常棒的 npm 包,可以帮助我们实现树形数据的可视化。本文将详细介绍该 npm 包的使用方法和具体示例,并希望...

    4 年前
  • npm 包 @alifd/babel-preset-next 使用教程

    什么是 @alifd/babel-preset-next @alifd/babel-preset-next 是阿里前端团队 Ant Design 开发的用于转译 JavaScript 代码的 Babe...

    4 年前
  • 前端技术文章:npm 包 build-plugin-ice-helpers 使用教程

    简介 在前端开发中,构建工具是非常必要的,可以帮助我们自动完成编译、优化、部署等任务。而今天要介绍的 npm 包 build-plugin-ice-helpers 就可以帮助我们简化开发过程中的一些操...

    4 年前
  • npm 包 @antv/util 使用教程

    本文介绍了如何使用npm 包 @antv/util,帮助前端开发人员更好的快速开发和定制自己的交互数据可视化应用。 简介 @antv/util 是一个 AntV 数据可视化库的工具集,提供了许多有用的...

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

    前言 在前端开发中,CSS 预处理器越来越受到开发者的喜爱。其中比较流行的 CSS 预处理器有 Sass 和 Less。不过在一些团队中,可能会有同事使用 Sass 而另一些同事则使用 Less,这就...

    4 年前
  • npm 包 build-plugin-ice-logger 使用教程

    前言 在前端项目开发过程中,一些自动化构建工具对于代码的优化、压缩和打包等工作都起到了至关重要的作用。针对这一问题,我们开发了 build-plugin-ice-logger,它是一个用于自动化构建的...

    4 年前
  • npm 包 @webpack-blocks/assets 使用教程

    在前端开发中,使用 webpack 构建工具是非常常见的。而在 webpack 中,@webpack-blocks/assets 是一个非常实用的 npm 包,可以帮助我们管理和处理项目中的各种资源文...

    4 年前
  • npm 包 build-plugin-ice-mpa 使用教程

    在前端开发中,我们经常使用各种工具来提高开发效率和质量。其中 npm 是一个非常重要的工具,它可以为我们方便地管理依赖包和构建项目。在这篇文章中,我们将介绍一个非常实用的 npm 包 -- build...

    4 年前
  • npm包d3-hexjson使用教程

    在前端开发中,数据可视化是一个很重要的环节。而D3.js是一个非常优秀的Javascript数据可视化库。其中,d3-hexjson是一个处理六边形地图的npm包,今天我们介绍一下它的使用方法。

    4 年前
  • NPM包eslint-plugin-no-copy-paste-default-export使用教程

    在前端开发过程中,经常需要使用相关的NPM包来提高代码的质量、效率和可维护性。其中,eslint-plugin-no-copy-paste-default-export这个包可以帮助开发者避免拷贝粘贴...

    4 年前
  • npm 包 @webpack-blocks/core 使用教程

    简介 Webpack是前端工程化和模块化开发的必备工具之一,它的魅力在于可以把整个前端项目打包成一个或多个静态文件,这无疑可以大大加快页面的访问速度和提升用户的体验。

    4 年前
  • npm 包 @ahooksjs/use-request 使用教程

    在前端开发中,我们经常需要向后端请求数据,而且请求数据的过程,我们经常需要做一些额外的工作,比如 loading 状态的展示,异常处理等等。一个好用的 React Hook 库 @ahooksjs/u...

    4 年前
  • npm 包 build-plugin-ice-request 使用教程

    前言 在前端开发中,我们经常需要与后端进行通讯,发送请求获取数据。虽然有很多基于 Ajax 的请求库,但在一些复杂场景下,我们可能需要更加灵活、高效的解决方案。前端工具链和构建工具的不断发展和完善,为...

    4 年前
  • npm 包 @babel/compat-data 使用教程

    介绍 @babel/compat-data 是 babel 的一个 npm 包,用于提供各个版本的 ECMAScript 特性对应的兼容性数据,方便开发者在编写 JavaScript 代码时进行特性兼...

    4 年前
  • npm 包 build-plugin-ice-router 使用教程

    简介 build-plugin-ice-router 是基于飞冰框架的插件,提供自动化的路由配置生成。在项目开发过程中,前端开发人员需要手动配置路由的跳转以及权限校验等相关功能,通过使用 build-...

    4 年前
  • npm 包 @webpack-blocks/eslint 使用教程

    在前端开发中,代码质量一直都是十分重要的问题,而 eslint 工具则可以帮助开发者在代码编写过程中检查出潜在问题,提高代码的可读性和可维护性。而在 webpack 项目中,通过使用 @webpack...

    4 年前
  • npm 包 `build-plugin-ice-ssr` 使用教程

    本文将介绍如何使用 build-plugin-ice-ssr 这个 npm 包实现 React 应用的服务端渲染 (SSR)。build-plugin-ice-ssr 是 Iceworks 开源的一个...

    4 年前
  • npm 包 @webpack-blocks/postcss 使用教程

    介绍 在前端开发中,我们经常需要使用工具来处理代码,比如使用 webpack 来打包代码、使用 postcss 来处理 CSS 文件。而在 webpack 中使用 postcss, 可以提供更加灵活、...

    4 年前

相关推荐

    暂无文章