前言
@beisen/shuttle-box 是一个基于 Webpack4 的多页面脚手架，支持自定义模板、postcss预处理器、模块热替换等功能。它可以帮助前端开发人员很好的进行多页面应用开发。这篇文章将介绍如何使用 @beisen/shuttle-box 这个 npm 包。
安装
使用 npm 安装：
npm install @beisen/shuttle-box -g
使用
创建一个多页面项目：
shuttle-box create projectName cd projectName npm install
启动开发服务器：
npm run dev
构建生产环境：
npm run build
文件结构
-- -------------------- ---- ------- --- ----- - ------- ---- --- ---- - ------- - --- ------ - --- ---------- --- ------ - ----- - --- ----------- - --- ---------- --- --- - ---- - --- ------ - ---- - - --- --- - --- -- - - --- ---- - ---- - - --- --- - ---- - - --- -- - -- -- - --- ---------- - -- - - --- --- - --- -- - --- ----- - -- - - --- ----- - -- - - --- -------- - ------ - - --- ---------- - ------ - --- ----- - --- - --- -------- - ---- --- ------------ --- ----------------- - ------- ---- --- ---------
自定义模板
默认模板是 public/index.html，你可以根据需要自定义模板。模板中可以使用模板变量替换，模板变量是 htmlWebpackPlugin.options 对象的属性，具体可以参考 html-webpack-plugin。
在模板中使用模板变量时，需要用到 ejs 语法，也就是以下形式：
<%= 模板变量 %>
例如，我们可以定义一个变量，然后在模板中使用这个变量：
-- -------------------- ---- -------
-- ---------------
-------------- - -
------ -
------ --------
----- -
-
----- --------------
-------- -------- ---- ---
-
--
--------- -------------------- -- ----
--------- ------------ -- -----
-
-然后，在 public/index.html 中使用：
<head>
<% for (var i in htmlWebpackPlugin.options.meta) { %>
<meta <%= htmlWebpackPlugin.options.meta[i].name %>="<%= htmlWebpackPlugin.options.meta[i].content %>">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>postcss 预处理器
除了 css 之外，@beisen/shuttle-box 还支持使用 postcss 预处理器。你可以通过修改 postcss.config.js 文件来添加预处理器，例如：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------
----------------------------
-------------------------------
------ -
---
--------------------
------- ---------
--
-
-模块热替换
@beisen/shuttle-box 支持模块热替换（HMR），它允许在应用运行时替换模块，而无需刷新整个页面。这个功能非常有用，可以提高开发效率。
结语
通过以上介绍，你应该已经知道了如何使用 @beisen/shuttle-box 这个 npm 包。它为我们提供了一个非常好的多页面应用模板，可以让我们更加专注于业务开发，而不用再去关心配置。如果你是一个前端开发人员，那么不妨试试看吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e281e8991b448df226