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使用事件 ...
随机推荐
- 第六篇 xpath的用法
使用pycharm debug调试效率会比较慢,因为每次调试都需要向url发送请求,等返回信息,scrapy提供一种方便调试的功能,如下: >>>(third_project) bi ...
- 要素选择变化事件 IActiveViewEvents_SelectionChanged
void IDockableWindowDef.OnCreate(object hook) { m_application = hook as IApplication; m_hookHelper = ...
- Vue之获取用户当前所在省市
今天小编给大家带来的是使用Vue获取用户所在城市,Vue是很强大的,给大家准备好现成的插件供大家调用,下面的Demo小编使用的是百度API. 首先我们从百度平台申请百度地图的秘钥,申请成功后我们将&l ...
- 2019-4-15-VisualStudio-如何在-NuGet-包里面同时包含-DEBUG-和-RELEASE-的库
title author date CreateTime categories VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库 lindexi 20 ...
- 关于print()里面的sep和end参数的使用
print('hello', 'world') #默认用空格隔开 #hello world print('hello', 'world', sep='wuli') #sep=''可以用来设置连接的字符 ...
- HashMap 1.7 与 1.8 的 区别,说明 1.8 做了哪些优化,如何优化的
JDK1.7用的链表散列结构,JDK1.8用的红黑树 在扩充HashMap的时候,JDK1.7的重新计算hash, JDK1.7只需要看看原来的hash值新增的那个bit是1还是0就好了,是0的话索引 ...
- 使用osgearth2.9 rex引擎在Qt中黑屏的问题修复
将osgUtil::RenderStage.cpp中的下列红色代码注释重新编译即可: if ( !colorAttached ) { setDrawBuffer( GL_NONE, true ); s ...
- 关于mybaitis
mybatis启动流程 1.首先来看看最简单的mybatis项目启动过程 public static void mybatisTest() throws IOException { String re ...
- ArrayList 详解
基本介绍 ArrayList: 支持null元素.有顺序.元素可以重复. 可以动态增长和缩减的索引序列,基于数组实现的List类(查询效率高,而在插入删除性能下降很多(需要移动数组元素)). 底层的数 ...
- centos7构建kylo-0.10.1
构建服务器使用centos7,8G内存.建议使用8G内存,因为内存不够失败了好几次. 系统需要提前安装一下组件: yum install -y gcc bzip2 rpm-build rpmdev ...