npm

什么是 npm？

npm 是 Node.js 的默认包管理器。在本指南中，我们使用 npm 来安装 Bootstrap 及其依赖项，然后使用命令行工具将 Sass 编译为 CSS——无需打包工具。

设置

我们正在从零开始构建一个使用 Bootstrap 的 npm 项目，所以在开始之前有一些前提条件和预备步骤。本指南要求你已经安装了 Node.js，并且对终端有一定的了解。

1. 创建一个项目文件夹并设置 npm。 我们将创建 my-project 文件夹并使用npm初始化 -y 避免它向我们提出所有互动问题的论点。

   壳

             mkdir my-project && cd my-project
   npm init -y
           

2. 安装 Bootstrap。 现在我们可以安装 Bootstrap。由于我们的一些组件依赖它们，我们还将安装 Floating UI 和 Vanilla Calendar Pro。如果你不打算使用菜单、弹出框或工具提示，可以省略 Floating UI。如果你不打算使用日期选择器，可以省略 Vanilla Calendar Pro。

   壳

             npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
           

3. 安装额外的依赖项。 除了 Bootstrap，我们还需要一些其他依赖来编译和后处理我们的 CSS。Sass 编译我们的源代码 .scss 文件到 CSS，并且 Autoprefixer 和 PostCSS 处理浏览器兼容性。我们安装 postcss-cli 打包，以便我们可以从命令行运行 PostCSS。

   壳

             npm i --save-dev autoprefixer postcss postcss-cli sass
           

4. 安装本地开发工具。 最后，为了让生活更轻松一些，我们建议安装一些开发工具，以便运行带热刷新功能的本地服务器（你所做的更改会自动反映在浏览器中）并添加一些代码质量检查。

   我们使用 nodemon 监视文件的更改， npm-run-all 同时运行多个 npm 脚本， sirv-cli 运行本地服务器，以及 stylelint 像 Bootstrap 那样格式化 CSS，以保持一致性。

   壳

             npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
           

现在我们已经安装了所有必要的依赖项，我们可以开始创建项目文件并导入 Bootstrap 了。

项目结构

我们已经创建了 my-project 文件夹并初始化了 npm。现在我们还将创建我们的 scss 文件夹、样式表和配置文件，以完善项目结构。请从 my-project 运行以下命令，或手动创建下面显示的文件夹和文件结构。

          mkdir {css,scss}
touch index.html scss/styles.scss postcss.config.js stylelint.config.mjs
        

完成后，你的项目应该看起来像这样：

          my-project/
├── css/
├── scss/
│   └── styles.scss
├── stylelint.config.mjs
├── index.html
├── package-lock.json
├── package.json
└── postcss.config.js
        

此时，一切都已放置到位，但我们需要配置我们的文件并添加一些 npm 脚本来编译 CSS。

配置 npm

在安装了依赖项并准备好我们的项目文件夹以开始编码之后，我们现在可以配置我们的 npm 脚本并在本地运行我们的项目。

1. 打开 postcss.config.js 在你的编辑器中。 我们需要配置 Autoprefixer 在 Sass 编译后运行，以确保浏览器兼容性。

   JavaScript

             const autoprefixer = require('autoprefixer')
   
   module.exports = {
     plugins: [
       autoprefixer
     ]
   }
           

2. 填写 index.html 文件。 我们需要一个 HTML 页面来渲染我们的项目。该页面链接到编译后的 CSS 文件，并包含 Bootstrap 的预构建 JavaScript 包。

   HTML

             <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ npm</title>
       <link rel="stylesheet" href="css/styles.css">
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and npm!</h1>
         <button class="btn-solid theme-primary">Primary button</button>
       </div>
       <script type="module" src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     </body>
   </html>
           

   我们在这里加入了一点 Bootstrap 样式 div class="container" 和 <button> 这样我们就可以看到何时通过我们的 npm 脚本加载了 Bootstrap 的 CSS。由于此设置未使用 JavaScript 打包器，我们通过 <script> 标签。

   阅读我们的 JavaScript 文档 有关如何使用 Bootstrap 插件的更多信息。

3. 添加 npm 脚本到 package.json. 打开 package.json 并添加以下脚本。我们使用 sass 编译我们的 Sass（使用 --load-path=node_modules 这样它就可以解析 Bootstrap) postcss-cli 应用 Autoprefixer， nodemon 留意变化， npm-run-all 按顺序或并行运行脚本， sirv-cli 为我们的项目服务，并 stylelint 检查我们的 Sass 代码规范。

   JSON

             {
     // ...
     "scripts": {
       "css-compile": "sass --load-path=node_modules --style expanded --source-map --embed-sources scss:css",
       "css-prefix": "postcss --config postcss.config.js --replace \"css/*.css\" \"!css/*.min.css\"",
       "build": "npm-run-all --sequential css-compile css-prefix",
       "watch": "nodemon --watch scss/ --ext scss --exec \"npm run build\"",
       "serve": "sirv --port 8080 --dev .",
       "start": "npm-run-all build --parallel watch serve",
       "lint": "stylelint \"scss/**/*.scss\""
     },
     // ...
   }
           

4. 配置 stylelint.config.mjs. 我们正在使用 stylelint-config-twbs-bootstrap 保持我们的 Sass 代码检查与 Bootstrap 自身的代码风格一致。

   JavaScript

             /** @type {import('stylelint').Config} */
   export default {
     extends: 'stylelint-config-twbs-bootstrap',
   }
           

5. 最后，我们可以开始运行 npm 脚本。 从 my-project 在你的终端中的文件夹里，运行那个新添加的 npm 脚本：

   壳

             npm start
           

在本指南的下一节也是最后一节中，我们将导入所有的 Bootstrap CSS。

导入 Bootstrap

将 Bootstrap 导入到我们的项目中需要在我们的 scss/styles.scss 文件中添加一个 Sass 导入。

1. 导入 Bootstrap 的 CSS。 添加以下内容到 scss/styles.scss 导入所有 Bootstrap 的源 Sass。我们使用 @use 规则，这是现代 Sass 模块系统。

   SCSS

             // Import all of Bootstrap’s CSS
   @use "bootstrap/scss/bootstrap";
           

   如果你愿意，你也可以单独导入我们的样式表。 阅读我们的 Sass 导入文档 详情请参阅。

2. 可选择自定义 Bootstrap 的 Sass 变量。 由于 Bootstrap 使用 Sass 模块（@use/@forward），你可以使用来覆盖默认值 with () 语法。你只需要包含你想要更改的键——Bootstrap 会将你的覆盖与其默认值合并。

   SCSS

             @use "bootstrap/scss/bootstrap" with (
     $root-tokens: (
       --border-radius: .25rem,
       --spacer: 1.5rem,
     ),
     $alert-tokens: (
       --alert-padding-x: 2rem,
       --alert-border-radius: 1rem,
     )
   );
           

   阅读我们的 Sass 定制文档 有关可用的所有令牌映射和选项的完整列表。

3. 你完成了！🎉 在完整加载 Bootstrap 的源 Sass 后，你的本地开发服务器现在应该看起来像这样：

   现在你可以开始添加你想使用的任何 Bootstrap 组件。请确保 查看完整的 npm Sass 和 JS 示例项目 关于如何包含额外的自定义 Sass，并通过仅导入所需的 Bootstrap CSS 和 JS 部分来优化构建。

在这里看到错误或过时的信息了吗？请 在 GitHub 上提交问题。需要帮助排查问题吗？在 GitHub 上搜索或发起讨论。