qlue-app-scripts 是一款帮助前端工程师快速初始化工程、提高工程构建效率的 npm 包。它集成了一系列列工程构建工具，如 Webpack、Babel、Less 等，并且提供了可扩展的配置。
本篇文章将详细介绍如何使用 qlue-app-scripts 快速搭建前端工程，包括安装、配置、构建等方面的内容。
安装
在命令行中执行以下指令安装 qlue-app-scripts：
npm install qlue-app-scripts --save-dev
配置
在项目根目录下创建 qlue.config.js 文件，并编写一下内容：
module.exports = { entry: 'src/index.js', // 入口文件 output: 'dist', // 输出路径 htmlTemplate: 'src/index.html', // html 模板文件 extraBabelPresets: [ 'mobx', ], // 额外的 Babel Presets 配置 };
在以上配置中，entry 表示入口文件；output 表示输出路径；htmlTemplate 表示 HTML 模板文件路径；extraBabelPresets 表示额外的 Babel Presets 配置。
构建
在命令行中执行以下指令，即可开始构建：
npm run dev执行以上指令后，qlue-app-scripts 将开始根据配置构建项目，并在浏览器中自动打开页面进行预览。
示例代码
下面是一个使用 qlue-app-scripts 的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- ------------------- ---------------- ---- --- ------------------------------- --展开代码
上述代码中，我们通过 import 引入了 React 和 ReactDOM，并用其渲染了一个名为 App 的 React 组件。在 ReactDOM.render() 方法中，我们将 App 组件作为参数传入，并指定了渲染的目标元素为 root。
总结
通过本文的介绍，我们了解了如何使用 qlue-app-scripts 快速搭建前端工程。它提供了一系列的配置选项，并将 Webpack、Babel、Less 等工程构建工具集成在一起，方便了我们进行前端工程的快速构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67900
