手机版

node.js中npm和webpack配置方法的详细说明

时间:2021-09-01 来源:互联网 编辑:宝哥软件园 浏览:

总结

Node.js用c语言编写,是一个基于chrome V8引擎的javascript运行环境,使得javaScript运行在浏览器服务器之外,可以用javaScript语言编写服务器端代码。

1.使用节点实现http服务器

下面创建了一个端口为8787的服务器。与php和java不同,php是基于本地的Apache服务器,node.js可以用代码快速搭建服务器。

//引入http模块var http=require(' http ');//调用http的接口创建服务器;回调-异步;Varserver=http。createserver(函数(req,res) {//request:与浏览器提交到服务器相关;服务器对浏览器的响应;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中的命名空间是独立的

将另一个模块引入一个模块的方法或变量需要

介绍fnData模块

要求('。/fnData’);

导入和导出(导出变量或函数)

module . exports={ my fn : test . my fn,a:test.a} 2。内置模块

Nodejs内置模块有:缓冲区、C/C插件、子进程、集群、控制台和Cr

加密、调试器、域名系统、域、错误、事件、文件系统,

全局,HTTP,HTTPS,模块,网络,操作系统,路径,进程,P unycode,查询字符串,Readline,REPL,流,字符串De coder,Timers,TLS/SSL,TTY,UDP/数据报,URL,实用程序,V8,VM,ZLIB内置模块不需要安装,外部模块需要安装;

3.新公共管理

1.一组模块是节点的包管理器

npm通常使用以下终端命令

1.

安装节点模块

npm安装模块名称

将软件包安装到全球环境中

npm安装名称-g

在安装的同时,如果有package.json文件,命令会将信息写入package.json中的项目路径。

npm安装名称-保存

2.检查节点模块的package.json文件夹,npm视图模块名称

3.检查当前目录中安装的节点包

国家预防机制清单

4.检查帮助命令

npm帮助

5.查看包的依赖关系

npm查看moudleName依赖关系

6.检查包的源文件地址

npm视图moduleName repository.url

7.检查包所依赖的节点版本

npm视图模块名称引擎

8.查看npm使用的所有文件夹

npm帮助文件夹

9.它用于在更改包内容后重建

npm重建模块名称

10.检查包装是否过期。该命令将列出所有过时的包,并及时更新它们

国家预防机制已经过时

11.更新节点模块

npm更新模块名称

12.卸载节点模块

npm卸载moudleName

13.npm包是一个包含package.json的文件夹,它描述了这个文件夹的结构。访问npm的json文件夹的方法如下:

$ npm帮助json

默认情况下,此命令打开网页,如果更改了默认打开程序,它可能不会作为网页打开。

14.发布npm包时,有必要检查包名是否已经存在。

$ npm搜索packageName

15.npm init:它将指导您创建一个package.json文件,包括名称、版本、作者等等

16.npm根目录:查看当前包的安装路径

Npm root -g:查看全局包的安装路径

17.npm -v:检查已安装的npm版本

4.工具

概念:是最近的一个加载器和打包工具,可以使用和处理各种资源,比如J(包括J X)、咖啡、风格(包括less/sass)、图片等作为模块。

配置步骤

1.全局安装webpack

npm安装webpack -g

2.创建一个新的webpack.config.js来编写这个配置文件

module.exports={//当前执行文件的路径//输入entry : _ _ dirname '/app/index . js ',//output 3360 { path : _ _ dirname '/build ',filename:' bundle.js'}。module : { loaders : [{ test :/\。css$/,loader:'style-loader!CSS-loader'}]},watch: true,devserver3360 {contentbase3360 '。/build ',//本地服务器加载的页面所在的目录为historyApiFallback: true。//不要跳转到inline: true//实时刷新},}3。使用下面的终端命令初始化并自动创建package.json文件,并一直按enter键

npm初始化

4.package.json文件准备好了。我们在这个项目中安装了网络包作为依赖包

//安装webpack NPM安装-保存-开发webpack,然后创建新的应用程序并在文件夹中构建文件夹。app文件夹包含我们想要编写的js、css和其他模块文件,而build包含由webpack打包和index.html生成的js文件

此时,目录结构如下:

5.将自动生成的bundle.js引入到inex.html文件中

!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title/head dy div class=' div 1 '/div!-web pack/graw/grount/body script src=' http : bundle . js '/script/html在module1.js中定义一些变量和方法,并使用export将其导出为模块

Console.log('我是module 1 . js ');Var a='我是变量';Var fn=function(){ console.log('我是fn function ');}module.exports={a,fn}使用require在index.js中引入module.js的方法和变量

var res=require('。/module 1’;要求('。/index . CSS ');Console.log('我是index . js ');console . log(RES . a);RES . fn();6.终端运行网络包

工具

7.package-loack.json中的脚本配置

配置npm后,您可以在命令行中使用简单的npm start命令,而不是webpack命令

通过以下配置,npm dev可以取代NPM web pack-dev-server-open命令

{ ' dependencies ' : { ' CSS-loader ' : '^0.28.8',' style-loader': '^0.19.1',' webpack': '^3.10.0' },dev dependencies ' : { ' web pack-dev-server ' : ' 2 . 11 . 0 ' },' scripts ' : { ' start ' : ' web pack ',' dev ' 3360 ' web pack-dev-server-open

摘要

以上是边肖介绍的node.js中的npm和webpack配置方法。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你的!

版权声明:node.js中npm和webpack配置方法的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。