nodejs与npm环境的使用
Published by Shangyu Liu,
1、ES6与node的模块引入:
ES6是export/import;node是require/(modules.exports={}/exports.property = {});ES6写的模块可以发布npm包,发布时用babel转化为node认识的格式。
2、exports与module.exports的区别:
对于每个node模块,nodejs会自动创建一个module对象,上面挂了exports属性,同时又会有一个exports指向module.exports,在内部有大概如下代码:
exports = module.exports = {};
当使用exports.property = {}时,相当于在module.exports上挂属性;module.exports = {}是把对象全部导出;但是如果用exports = {}相当于断开了exports与module.exports之间的引用关系,而另一个模块在require时得到的是module.exports,不是exports,因此可以理解正确和错误的写法了。
4、npm init:
初始化一个npm包的项目,这个项目是可以发布为npm包的,init之后会建立一个package.json,其中除了描述各种作者、版本的信息以外,会有很多配置,比如所依赖的包,在npm install之后package.json会有所改动。依赖分为开发依赖和依赖,devDependencies仅是开发环境下才依赖的包,dependencies是开发、上线都依赖的包,比如npm install d3,因为d3的npm包中配置了依赖,这份依赖会传到当前包的package.json中来。
5、npm包的安装:
本地安装:npm install 模块名称,模块被下载安装到正在运行命令的目录下的node_modules文件夹中,如果不存在node_modules则会新建一个,可以通过require来使用模块了
全局安装:npm install 模块名称 -g,模块下载并被安装到node的安装目录中了(我还没找到),可以在命令行中随处使用【坑:之前出现了全局安装但包不能用的情况,排查后发现包被安装到了node_modules中的lib下了,npm可以设置全局安装的根目录,对于我的mac,目录不能直接设置为:/usr/local/lib/node_modules,而应该:/usr/local,这样就会自动往lib下的node_modules中去了,设置和查询的命令分别为:npm config set prefix "路径",npm config get prefix】。
6、npm包的发布与使用:
npm发布要先注册、邮件确认、命令行adduser之后才能发布。使用npm包,包内代码必须是符合commonjs(即node所属的规范,比如d3模块安装完之后有index.js,可以看到使用ES5完成的代码,但npm能用的却是build下的给node写的符合commonjs规范的代码)。因此在上传代码之前必须要进行转换,babel是常用的工具,可以对ES5、ES6、commonJS规范代码、amd规范代码、typescripe进行两两转换。
在4中提到了package.json,dependencies中指定的包才能在别人npm install时装,npm install默认dev、非dev都会装,而npm install —production不会装dev的包,npm install —dev才会。
package.json的main字段指明了导出对象的js文件。
7、在ts中使用npm包:
ts实质上是js的超集,ts中对包的引入是用的ES6的语法,但是ts为什么能使用npm的包呢,因为webpack会将ts翻译成node可用的代码,import翻译成require等。angular-cli中集成了实时翻译的环境,配置写在了tsconfig.json之中。最后angular再将整个代码翻译成ES5。
8、npm包中的scripts:
只有“start"配置的js文件可以直接npm 文件名.js;其他的scripts命令需要用npm run 文件名.js。
【坑1】:之前出现了全局安装但包不能用的情况,排查后发现包被安装到了node_modules中的lib下了,npm可以设置全局安装的根目录,对于我的mac,目录不能直接设置为:/usr/local/lib/node_modules,而应该:/usr/local,这样就会自动往lib下的node_modules中去了,设置和查询的命令分别为:npm config set prefix "路径",npm config get prefix。
【坑2】:遇到npm再local无法更新或安装错误的时候,直接删掉node_modules,npm/cnpm install就可以了。
【坑3】:angular项目,使用angular-cli创建后,上传到github再clone下来ng-server无法启动,发现是项目根目录下存在一个隐藏文件:.angular-cli.json,进入文件夹,在终端使用命令:defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder来显示隐藏文件,将其拷贝到github仓库中方能使用