node.js安装模块使用的疑问-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

高洛峰 2017-04-17 13:59:36

[Node.js讨论组]

627

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

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

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

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(3)

高洛峰2017-04-17 14:01:36 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 更加智能，你可以看一下相关的文档。

赞 +0

添加回复

巴扎黑2017-04-17 14:01:36 2楼

直接在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命令要在你的项目目录里运行

赞 +0

添加回复

阿神2017-04-17 14:01:36 1楼

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

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

来引入css文件

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>