node.js安装模块使用的疑问
高洛峰
高洛峰 2017-04-17 13:59:36
0
3
381

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

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

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

高洛峰
高洛峰

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

reply all (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 文件中这样引入文件:

 

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 里这样引用:

js 也是类似。

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

    巴扎黑

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

          
    

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

      阿神

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

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

      来引入css文件

        Latest Downloads
        More>
        Web Effects
        Website Source Code
        Website Materials
        Front End Template
        About us Disclaimer Sitemap
        php.cn:Public welfare online PHP training,Help PHP learners grow quickly!