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. ArrayList、Vector、LinkedList的区别

    ArrayList.Vector.LinkedList的区别 1.底层数据结构: ArrayList底层实现是动态数组 Vector底层实现是动态数组 LinkedList底层实现是双链表  2.扩容 ...

  2. shiro注解权限拦截失效解决

    今天在给项目添加注解拦截的时候,总是发现拦截不起作用,加入了这个注解按照角色来进行拦截.角色不是1的用户访问此方法都会被拦截. 测试了一会发现把注解bean配置到了shiro.xml中没有起作用.需要 ...

  3. vue $emit 子传父

    我们使用子组件传递值给父组件使用 $emit 代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  4. Vue开发实战

    递归组件 关键是组件在模板内能调用自身,关键是name属性 首先我们先定义数据格式 list: [ { title: '标题1' }, { title: '标题2', children: [ { ti ...

  5. Batch - %~dp0 modifiers

    %~dp0 简易解释 The variable %0 in a batch script is set to the name of the executing batch file. The ~dp ...

  6. luoguP1134 阶乘问题 [数论]

    题目描述 也许你早就知道阶乘的含义,N阶乘是由1到N相乘而产生,如: 12! = 1 x 2 x 3 x 4 x 5 x 6 x 7 x 8 x 9 x 10 x 11 x 12 = 479,001, ...

  7. LUOGU P4560 [IOI2014]Wall 砖墙 (线段树)

    传送门 解题思路 线段树打标记,刚开始想复杂了,维护了四个标记.后来才知道只需要维护一个最大值最小值即可,然后更新的时候分类讨论一下. 代码 #include<iostream> #inc ...

  8. LUOGU P1501 [国家集训队]Tree II (lct)

    传送门 解题思路 \(lct\),比较模板的一道题,路径加和乘的维护标记与线段树\(2\)差不多,然后剩下就没啥了.但调了我将近一下午.. 代码 #include<iostream> #i ...

  9. NX二次开发-UFUN重命名图纸页UF_DRAW_rename_drawing

    #include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...

  10. 在桌面上显示IE图标(非快捷键)

    1.在桌面点击右键选择"属性"打开"显示属性",选择"桌面">"自定义桌面">"常规"& ...