NPM 全称 Node Package Manager

Node包管理和分发工具,可以把NPM理解为前端的Maven

我们通过npm可以很方便地下载js库,管理前端工程

最近版本的node.js已经集成了npm工具

NPM命令

npm init

    按照提示输入相关信息,如果是用默认值则直接回车即可:
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词,便于用户搜索到我们的项目 最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml 本地安装:install命令用于安装某个模块
npm install express 全局安装:使用全局安装会将库安装到全局目录下
npm install jquery -g 批量下载
进入目录(package.json所在的目录)输入命令:npm install 淘宝NPM镜像 安装:npm install -g cnpm --registry=https://registry.npm.taobao.org 使用:cnpm install 需要下载的js库 不安装 cnpm 只用淘宝镜像,设置 npm 的镜像: $ npm config set registry https://registry.npm.taobao.org/ 执行下面的命令,确认是否切换成功: $ npm config get registry 运行工程
npm run dev dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测

Webpack:模块和打包

Webpack 是一个前端资源加载/打包工具:
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求 Webpack配置: JS打包: 1,创建src文件夹,在src文件夹下编写js文件(logic.js) //commonjs的模块化规范
module.exports = {
add:function() {}
} //ES6的模块化规范
export const add = function() {} 2,src下创建main.js //commonjs的模块化规范
const {add} = require('./logic.js');
console.log(add(100, 200)); //ES6的模块化规范
import {add} from "./logic.js";
console.log(add(100, 200)); 3,创建配置文件webpack.config.js ,该文件与src处于同级目录 const path = require("path");
module.exports = {
entry: './src/main.js', //入口
output: { //出口
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}; 读取当前目录下src文件夹中的main.js(入口文件)内容,
把对应的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js 4,执行编译命令:webpack 5,引入:<script src="./dist/bundle.js"></script> CSS打包: 1,安装 style-loader(将样式添加到DOM中) 和 css-loader(加载)
cnpm install style-loader css-loader --save-dev 2,webpack.config.js const path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //有顺序,从右到左
}
]
}
}; 3,运行webpack

详情请见https://www.webpackjs.com/loaders/#样式

NPM一Node包管理和分发工具的更多相关文章

  1. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...

  2. 如何用Node编写命令行工具

    0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...

  3. NPM(Node.js) 使用介绍

    前言:express 推出了4.X,自己尝试了一下,出现了各种问题.结果查看了各种文档和问题,现在在这个给大家分享下4.X版本的安装. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具, ...

  4. 通过npm写一个cli命令行工具

    前言 如果你想写一个npm插件,如果你想通过命令行来简化自己的操作,如果你也是个懒惰的人,那么这篇文章值得一看. po主的上一篇文章介绍了定制自己的模版,但这样po主还是不满足啊,项目中我们频繁的需要 ...

  5. windows 下更新 npm 和 node

    原文链接 公司的新项目要启动了,需要使用 Angular 4.0,并且使用 webpack 工具进行打包.所以就需要安装 node.node 的安装很简单,在 node 的官网 nodejs.org  ...

  6. Node.js 命令行工具的编写

    日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作.其编写也不难,和日常编写 Node.js 代码并无二致. package.json 中的 bin 字段 一个 npm 模块, ...

  7. 【转载】linux下升级npm以及node

    原文:http://blog.csdn.net/qq_16339527/article/details/73008708 npm升级 废话不多说,直接讲步骤.先从容易的开始,升级npm. npm这款包 ...

  8. linux下升级npm以及node

    npm升级 废话不多说,直接讲步骤.先从容易的开始,升级npm. npm这款包管理工具虽然一直被人们诟病,很多人都推荐使用yarn,但其使用人数还是不见减少,况且npm都是随node同时安装好的,一时 ...

  9. 实用的 Node.js 教程,工具和资源

    这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...

随机推荐

  1. 第六篇 xpath的用法

    使用pycharm debug调试效率会比较慢,因为每次调试都需要向url发送请求,等返回信息,scrapy提供一种方便调试的功能,如下: >>>(third_project) bi ...

  2. 要素选择变化事件 IActiveViewEvents_SelectionChanged

    void IDockableWindowDef.OnCreate(object hook) { m_application = hook as IApplication; m_hookHelper = ...

  3. Vue之获取用户当前所在省市

    今天小编给大家带来的是使用Vue获取用户所在城市,Vue是很强大的,给大家准备好现成的插件供大家调用,下面的Demo小编使用的是百度API. 首先我们从百度平台申请百度地图的秘钥,申请成功后我们将&l ...

  4. 2019-4-15-VisualStudio-如何在-NuGet-包里面同时包含-DEBUG-和-RELEASE-的库

    title author date CreateTime categories VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库 lindexi 20 ...

  5. 关于print()里面的sep和end参数的使用

    print('hello', 'world') #默认用空格隔开 #hello world print('hello', 'world', sep='wuli') #sep=''可以用来设置连接的字符 ...

  6. HashMap 1.7 与 1.8 的 区别,说明 1.8 做了哪些优化,如何优化的

    JDK1.7用的链表散列结构,JDK1.8用的红黑树 在扩充HashMap的时候,JDK1.7的重新计算hash, JDK1.7只需要看看原来的hash值新增的那个bit是1还是0就好了,是0的话索引 ...

  7. 使用osgearth2.9 rex引擎在Qt中黑屏的问题修复

    将osgUtil::RenderStage.cpp中的下列红色代码注释重新编译即可: if ( !colorAttached ) { setDrawBuffer( GL_NONE, true ); s ...

  8. 关于mybaitis

    mybatis启动流程 1.首先来看看最简单的mybatis项目启动过程 public static void mybatisTest() throws IOException { String re ...

  9. ArrayList 详解

    基本介绍 ArrayList: 支持null元素.有顺序.元素可以重复. 可以动态增长和缩减的索引序列,基于数组实现的List类(查询效率高,而在插入删除性能下降很多(需要移动数组元素)). 底层的数 ...

  10. centos7构建kylo-0.10.1

      构建服务器使用centos7,8G内存.建议使用8G内存,因为内存不够失败了好几次. 系统需要提前安装一下组件: yum install -y gcc bzip2 rpm-build rpmdev ...