NPM一Node包管理和分发工具
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包管理和分发工具的更多相关文章
- npm 是node.js下带的一个包管理工具
npm 是node.js下带的一个包管理工具 npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...
- 如何用Node编写命令行工具
0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...
- NPM(Node.js) 使用介绍
前言:express 推出了4.X,自己尝试了一下,出现了各种问题.结果查看了各种文档和问题,现在在这个给大家分享下4.X版本的安装. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具, ...
- 通过npm写一个cli命令行工具
前言 如果你想写一个npm插件,如果你想通过命令行来简化自己的操作,如果你也是个懒惰的人,那么这篇文章值得一看. po主的上一篇文章介绍了定制自己的模版,但这样po主还是不满足啊,项目中我们频繁的需要 ...
- windows 下更新 npm 和 node
原文链接 公司的新项目要启动了,需要使用 Angular 4.0,并且使用 webpack 工具进行打包.所以就需要安装 node.node 的安装很简单,在 node 的官网 nodejs.org ...
- Node.js 命令行工具的编写
日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作.其编写也不难,和日常编写 Node.js 代码并无二致. package.json 中的 bin 字段 一个 npm 模块, ...
- 【转载】linux下升级npm以及node
原文:http://blog.csdn.net/qq_16339527/article/details/73008708 npm升级 废话不多说,直接讲步骤.先从容易的开始,升级npm. npm这款包 ...
- linux下升级npm以及node
npm升级 废话不多说,直接讲步骤.先从容易的开始,升级npm. npm这款包管理工具虽然一直被人们诟病,很多人都推荐使用yarn,但其使用人数还是不见减少,况且npm都是随node同时安装好的,一时 ...
- 实用的 Node.js 教程,工具和资源
这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...
随机推荐
- ArrayList、Vector、LinkedList的区别
ArrayList.Vector.LinkedList的区别 1.底层数据结构: ArrayList底层实现是动态数组 Vector底层实现是动态数组 LinkedList底层实现是双链表 2.扩容 ...
- shiro注解权限拦截失效解决
今天在给项目添加注解拦截的时候,总是发现拦截不起作用,加入了这个注解按照角色来进行拦截.角色不是1的用户访问此方法都会被拦截. 测试了一会发现把注解bean配置到了shiro.xml中没有起作用.需要 ...
- vue $emit 子传父
我们使用子组件传递值给父组件使用 $emit 代码 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Vue开发实战
递归组件 关键是组件在模板内能调用自身,关键是name属性 首先我们先定义数据格式 list: [ { title: '标题1' }, { title: '标题2', children: [ { ti ...
- Batch - %~dp0 modifiers
%~dp0 简易解释 The variable %0 in a batch script is set to the name of the executing batch file. The ~dp ...
- 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, ...
- LUOGU P4560 [IOI2014]Wall 砖墙 (线段树)
传送门 解题思路 线段树打标记,刚开始想复杂了,维护了四个标记.后来才知道只需要维护一个最大值最小值即可,然后更新的时候分类讨论一下. 代码 #include<iostream> #inc ...
- LUOGU P1501 [国家集训队]Tree II (lct)
传送门 解题思路 \(lct\),比较模板的一道题,路径加和乘的维护标记与线段树\(2\)差不多,然后剩下就没啥了.但调了我将近一下午.. 代码 #include<iostream> #i ...
- NX二次开发-UFUN重命名图纸页UF_DRAW_rename_drawing
#include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...
- 在桌面上显示IE图标(非快捷键)
1.在桌面点击右键选择"属性"打开"显示属性",选择"桌面">"自定义桌面">"常规"& ...