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

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

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

在git中，使用npm命令可以看到normalize.css已经安装

如果你想使用 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文件

【热门文章】