最近开始接触整个vue生态,准备直接上手vue的cli,直接入手前端框架的使用,这样就有必要先理解些基础
工具,比如node和npm以及webpack
webpack web项目的打包工具
webpack可以将前端各种资源（包括CSS及其预编译方案、JS及其预编译方案）统一打包为.js文件和资源文件。
webpack.png
前端项目会有各种复杂的依赖,包括scss less 各种各样依赖的js,这个时候用webpack 就可以顺利的将各种各样的依赖打包成几个文件
webpack可以支持引入的符合CommonJs的js包打包这样和node包结合起来了
node 和 npm
Node是javascript语言在服务端运行的环境,据阮一峰老师讲
js通过node在服务器运行,node像是js的虚拟机,同时node提供大量的工具与操作系统互动这个意义上Node又是js的工具库
node.js作为一个后端的脚本语言,必定有大量的开源第三方库来支持它,npm 就是来node的包管理工具,node的包就是实现了commonJS组织方式的js代码,可以直接引入到js文件在中,利用其node 的require引入这就实现了现成轮子的应用.
npm包用在前端代码中
npm 不仅仅是node 的包管理工具,应该是整个js 的包管理工具,越来越多的前端代码发布到npm上,前端开发也越来越依赖于node带来的整个生态,比如各种各样的工具,由于CommonJS在前端开发中应用的成熟，复用node的代码成为可能（且越来越方便）
既然webpack支持在前端使用CommonJS模块规范,意味着我们可以直接在前端代码中使用npm的模块
npm不仅仅是node的包管理工具,是整个js生态的包管理工具
package.json npm命令起作用的关键
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境
- npm install 会安装package.json里面的相关依赖(另:如果要安装package.json里面没有的包则需要npm install package_name --save安装,--save则是将其写入package.json文件)
- scripts 指定运行脚本命令的npm缩写
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
vue中会有如上配置,npm run dev 就会对应执行后面的命令 npm run start就会执行 npm run dev ,npm run build 会执行相应的node命令
- dependencies字段,指定项目运行所需要的模块，devDependencies字段,指定项目开发所需要的模块
- npm 全局安装和局部安装 加了-g 或 --global就是全局安装,安装在node文件夹下,可以在命令行里直接调用.如果不加,是局部安装 则会在当前文件夹里增加一个node_modules文件夹,里面是相关的包,可以在项目中直接require调用
网友评论