npm 包 common-files 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会遇到需要使用公共文件的情况，如共用的样式、字体等。为了避免重复编写和管理，我们可以使用一个常见的 npm 包 - common-files。

安装

在任意项目的根目录下，运行以下命令进行安装：

npm install --save-dev common-files

使用

样式

假设你希望在你的项目中使用 common-files 中的 normalize.css。

在你的 CSS 文件中引入 common-files：

@import "~common-files/normalize.css";

~ 符号意味着开始寻找基于根目录的文件夹。
normalize.css 为 common-files 中提供的样式文件名。

字体

假设你希望在你的项目中使用 common-files 中的 Lato 字体。

在你的 CSS 中，添加以下代码：

@import url("~common-files/Lato/font.css");
body {
  font-family: "Lato", sans-serif;
}

图片

你可以通过使用 common-files 中的图片位置来访问现有的图片。使用以下示例代码中所示的位置和文件名来引用图片：

<img src="~common-files/images/logo.png" alt="logo" />

JavaScript

你也可以使用 common-files 中提供的 JavaScript 文件。只需在你的 HTML 文件中引入以下代码：

<script src="~common-files/index.js"></script>

示例代码

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

@import "~common-files/normalize.css";
@import url("~common-files/Lato/font.css");
body {
  font-family: "Lato", sans-serif;
}

意义

使用 common-files 可以避免重复编写和管理公用文件，提高开发效率。它也可以确保文件名和路径保持一致，减少错误和混乱。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005582881e8991b448d5535