详解node.js中的npm和webpack配置方法
概述
Node.js用c++语言编写而成的，是一个基于chrome V8引擎的javascript运行环境，让javaScript的运行脱离浏览器服务端，可以使用javaScript语言书写服务器端代码
1.使用node来实现一个http服务器
下面创建了一个端口为8787的服务器.他与php，java等不同，像php本地还要基于阿帕奇服务器，node.js能用代码快速搭建一个服务器。
// 引入http模块
var http = require("http");
// 调用http的接口创建服务器；回调--->异步；
var server = http.createServer(function(req,res){
// request:浏览器提交给服务器相关；response:服务器到浏览器；
console.log(111);
// 设置编码格式
res.setHeader("Content-type","text/html;charset=utf8");
res.write("<h1>hello world 11233</h1>");
res.write("你好世界");
res.end();
})
server.listen(8787);
模块化
1. 模块化开发
1.CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。
2.创建自己的模块
node.js中命名空间是独立的
在一个模块里引入另一个模块的方法或者变量使用require
•引入fnData模块
require("./fnData");
•导入与导出(导出变量或者函数)
module.exports = {
myFn:test.myFn,
a:test.a
}
2. 内置模块
nodejs内置模块有：Buffer，C/C++Addons，Child Processes，Cluster，Console，Cr
ypto，Debugger，DNS，Domain，Errors，Events，File System，
Globals，HTTP，HTTPS，Modules，Net，OS，Path，Process，P unycode，Query Strings，Readline，REPL，Stream，String De coder，Timers，TLS/SSL，TTY，UDP/Datagram，URL， Utilities，V8，VM，ZLIB；内置模块不需要安装，外置模块需要安装；
3. npm
1.一组模块的集合，是node的包管理器
下面npm常用的终端命令
1.
安装Node模块
npm install moduleNames
将包安装到全局环境中
npm install <name> -g
安装的同时，如果有package.json文件时,命令将信息写入package.json中项目路径中
npm install <name> --save
2.查看node模块的package.json文件夹npm view moduleNames
3.查看当前目录下已安装的node包
npm list
4.查看帮助命令
npm help
5.查看包的依赖关系
npm view moudleName dependencies
6.查看包的源文件地址
npm view moduleName repository.url
7.查看包所依赖的Node的版本
npm view moduleName engines
8.查看npm使用的所有文件夹
npm help folders
9.用于更改包内容后进行重建
npm rebuild moduleName
10.检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新
npm outdated
11.更新node模块
npm update moduleName
12.卸载node模块
npm uninstall moudleName
13.一个npm包是包含了package.json的文件夹，package.json描述了这个文件夹的结构。访问npm的json文件夹的方法如下：
$ npm help json
此命令会以默认的方式打开一个网页，如果更改了默认打开程序则可能不会以网页的形式打开。
14.发布一个npm包的时候，需要检验某个包名是否已存在
$ npm search packageName
15.npm init：会引导你创建一个package.json文件，包括名称、版本、作者这些信息等
16.npm root：查看当前包的安装路径
npm root -g：查看全局的包的安装路径
17.npm -v：查看npm安装的版本
4. webpack
概念：是近的一加载器兼打包工具，它能把各种资源，例如J (含J X)、 coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
配置步骤
1.全局安装webpack
npm install webpack -g
2.新建webpack.config.js编写此配置文件
module.exports = {
// 当前执行文件的路径
// 输入
entry:__dirname+"/app/index.js",
// 输出
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true,
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
}
3.使用下面终端命令初始化自动创建package.json文件，一直按enter就可以了
npm init
4.package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
// 安装Webpack npm install --save-dev webpack
接着在文件夹中新建app和build文件夹，app文件夹放我们要写的js,css等模块文件，build里放webpack打包生成的js文件以及一个index.html
此时目录结构如下：
5.在inex.html文件中引入自动生成的bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"></div> <!--webpack/gulp/grount--> </body> <script src="bundle.js"></script> </html>
在module1.js中定义一些变量与方法，作为一个模块使用exports导出
console.log("我是module1.js");
var a = "我是a变量";
var fn = function(){
console.log("我是fn函数");
}
module.exports = {
a,
fn
}
在index.js中使用require引入module.js的方法与变量
var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();
6.终端运行webpack
webpack
7.在package-loack.json中scripts配置
对npm进行配置后可以在命令行中使用简单的npm start命令来替代webpack的命令
像 下面配置后，npm dev可以代替 npm webpack-dev-server --open命令
{
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
},
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
此时输入npm start 就可以打包文件了
总结
以上所述是小编给大家介绍的node.js中的npm和webpack配置方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:
- 卸载安装Node.js与npm过程详解
- Node.js中npm常用命令大全
- 详解Node.js包的工程目录与NPM包管理器的使用
- node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
- [将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
- Node.js安装教程和NPM包管理器使用详解
- Webpack 实现 Node.js 代码热替换
相关推荐
-
Node.js安装教程和NPM包管理器使用详解
2009年的JSCOnf大会上,一个叫Ryan Dahl的年轻程序员向人们展示了一个他正在做的项目,一个基于Google V8引擎的JavaScript运行平台,它提供了一套事件循环和低IO的应用程序编程接口(API).和其他的服务端平台不同, JavaScript天生就是事件驱动IO,而这个项目又大大降低了编写事件驱动应用程序的复杂度,因此它很快就以不可思议的速度的成长流行起来,并应用到实际项目中.(Jack:这段翻译的不太靠谱,原文:This project was not like oth
-
Webpack 实现 Node.js 代码热替换
这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌顶啊... https://github.com/webpack/docs/issues/45#issuecomment-149793458 Here is the process in short: Compile the serv
-
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
这里选用的操作系统是社区版Debian,Debian和Ubuntu的操作指令是一脉相承的,再加上之前玩过一段时间的Raspberry PI,个人比较熟悉,以下的安装过程其实同样适用于树霉派(安装node.js和NPM那一部分). 1) 注册并选型 在aws上注册并绑定信号卡后即可使用亚马逊的一年免费EC2主机,不过配置通常比较低,通常为0.612Mb(linux)和1G(Win)内存. http://aws.amazon.com/ 这里选用的是社区版Debian的版本是 Debian-squee
-
Node.js中npm常用命令大全
npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. npm install 安装模块 基础语法 npm install (with no args, in package dir) npm install [<@scope>/]<name> npm install [<@scope>/]<name>@<tag>
-
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
在使用npm install安装扩展插件时,系统提示"npm install Error: ENOENT, stat 'C:Users<用户名>AppDataRoamingnpm'". 以前都是很顺利的安装过程,没出现这种情况.我这里的解决办法是直接创建上面提示的目录就好了,应该是node.js权限不够,在此备注. 有时候就是这样,很可能一个很久都无法解决的问题,实际解决方法很简单,就是这么任性!!
-
详解Node.js包的工程目录与NPM包管理器的使用
工程目录 了解了以上知识后,现在我们可以来完整地规划一个工程目录了.以编写一个命令行程序为例,一般我们会同时提供命令行模式和 API 模式两种使用方式,并且我们会借助三方包来编写代码.除了代码外,一个完整的程序也应该有自己的文档和测试用例.因此,一个标准的工程目录都看起来像下边这样. - /home/user/workspace/node-echo/ # 工程目录 - bin/ # 存放命令行相关代码 node-echo + doc/ # 存放文档 - lib/ # 存放API相关代码 echo
-
卸载安装Node.js与npm过程详解
下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机(Homestaead)和生产环境阿里云 CentOS 系统安装 Node.js 的步骤,以及 npm 安装依赖的不同之处. 使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载,我直接贴上 Stack Overflow 上提供的步骤: 1.卸载 npm 和 Node.js 先卸载 npm,命令是:sudo npm uninstall npm -g,然后卸载 Node.js. Running whic
-
详解node.js中的npm和webpack配置方法
概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的
-
详解Node.js 应用高 CPU 占用率分析方法
目录 本地运行 Node.js 应用 如何采集生产系统上的 Node.js 应用性能数据 本地运行 Node.js 应用 我们在本地运行 Node.js 应用,使用 --inspect 标志启动应用程序,再次执行负载测试,在 Chrome 浏览器中打开 chrome://inspect: 单击应用下方的 inspect 按钮,然后开始 CPU 占用率分析: 等待一段时间后,就能看到 CPU profile 的结果: 如何采集生产系统上的 Node.js 应用性能数据 在大多数情况下,如果性能问题
-
详解Django模版中加载静态文件配置方法
1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg
-
详解Node.js中的Async和Await函数
在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯
-
详解Node.js中的模块化方法
目录 一.模块化的基本概念 1.什么是模块化 2.模块化规范 二.Node.js 中的模块化 1.Node.js 中的模块化分类 2.加载模块 3.向外共享模块作用域中的成员 4.Node.js 中的模块化规范 (1)什么是CommonJS模块规范 (2)CommonJS 模块化规范 (3)每个导出的模块都有一个moudle对象,该对象包含的属性有: 三.npm 与 包 1.包的概念 2.包的安装与卸载 3.包管理配置文件 总结 一.模块化的基本概念 1.什么是模块化 模块化是指解决一个复杂问题
-
详解Node.js中的事件机制
前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操
-
详解Node.js中path模块的resolve()和join()方法的区别
关于Node.js中path模块的resolve()和join()方法的比较,对照着总结看例子差不多以后在写模块的时候思路就能很清晰了 resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <string> 一个路径或路径片段的序列 如果没有传入 path 片段,或者path 片段长度为零(空字符),则 path.resolve() 会返回当前工作目录的绝对路径(相当
-
详解Node.js中exports和module.exports的区别
今天看了下node.js的require方法的源码,终于搞清楚exports和module.exports的区别了. 我们知道,node.js的模块暴露有两种方法. 1. 方式一:用exports //a.js exports.log =function (str) { console.log(str); } //b.js var s = require("./a"); s.log("哈哈哈哈"); 2. 方式二:用module.exports //a.js mod
-
详解Node.js 中使用 ECDSA 签名遇到的坑
最近有个朋友问我关于 Node.js 下使用 ECDSA 的问题,主要是使用 Node.js 的 Crypto 模块无法校验网络传输过来的签名结果.在踩坑无数后,终于搞清楚了原因. 坑 0x00:签名输出格式 在排除了证书.消息不一致的可能之后,我开始对比使用 Node.js 签名的结果与网络传输过来的签名,发现长度不一致,大约差了5~7个字节.于是去网上搜索了一下,才知道原来 Node.js (基于 OpenSSL)签名得到的是 DER 格式的内容,而网络上常用的 ECDSA 签名结果是 IE
-
node.js中fs文件系统模块的使用方法实例详解
本文实例讲述了node.js中fs文件系统模块的使用方法.分享给大家供大家参考,具体如下: node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法为异步方法. 一.文件的整个读取 const fs = require('fs'); //参数一表示读取的文件 //参数二表示读取的配置,{encoding:'null', flag:'r'} //encod