node.js安装模块使用的疑问

hzrWeb
  • 1.2k

现在一些项目,除了提供源文件,还提供node.js安装模块的方式。我的机器已安装有node和git,我通过如图所示安装了normalize.css模块,那么我该如何使用呢?
图片描述

比如我有个css文件,我要植入normalize.css进行样式初始化,该怎么做。对node和npm不太理解,求指点。

在git中,使用npm命令可以看到normalize.css已经安装
图片描述

回复
阅读 3.1k
3 个回答
✓ 已被采纳

如果你想使用 npm 来进行包管理,那意味首:

  • 使用 package.json 来进行项目的包或依赖管理

  • 使用专门的管理工具,来管理或打包对应的 js / css 文件

如果你是个小型项目,而且不是专门的前端或 Node 项目,并不适合使用 npm 来进行管理,如果你有大量的依赖,而且本来就是前端项目,那就考虑开始使用 npm 来进行包或依赖管理。

使用 package.json 来进行包或依赖管理

在项目中加入第三方包的时候,使用如下的命令来进行安装:

npm i --save normalize.css

这样便将依赖加入到了 package.json 。对应的文件,下载在 node_modules 文件夹中。

在项目中使用 js / css 文件

在开发过程中,你可以将 node_modules 文件夹整体放在 Web 服务器的目录内,这样,便可以在 html 文件中这样引入文件:

<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
<script src="node_modules/moment/moment.js"></script>

js / css 文件的管理和打包

实际上,上面那样引用,并不方便。一般是使用 Gulp / Grunt / Webpack 一类的工具,管理和打包 js / css 文件。具体你可以查一下这三个相关的资料。

比如,使用 Gulp 可以这样来打包压缩 css 文件,如下:

var gulp = require('gulp');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');

var cssFiles = [
  'node_modules/bootstrap/dist/css/bootstrap.css',
  'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css',
  // ... ...
];

gulp.task('stylesheet_min', function(){
  gulp
  .src(cssFiles)
  .pipe(concat('all.min.css'))
  .pipe(cssmin())
  .pipe(gulp.dest( path.join(BUILD_FLODER, 'css') ))
});

上面的代码,是将多个 css 合并为一个 css 文件,并将它移动到指定的目录,这样,你便可以在 html 里这样引用:

<link rel="stylesheet" href="css/all.css">

js 也是类似。

Grunt 与 Gulp 在处理上,有些类似。Webpack 更加智能,你可以看一下相关的文档。

直接在html里引入normalize.css就好了,像这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" charset="utf-8">
</head>
<body>

</body>
</html>

前提是你的npm install --save normalize.css命令要在你的项目目录里运行

如果使用webpack打包,可以在js文件中写

require("normalize.css")
// 或者es6的写法
import "normalize.css"

来引入css文件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏