小白开始学习前端全栈之node的包管理

2015-08-31 01:17:00
hainuo
原创 2355
摘要:nodejs的包管理功能使用学习
今天开始学习wabpack([webpack-howto](https://github.com/hainuo/webpack-howto) 或者 [webpack-howto中文版](https://github.com/hainuo/webpack-howto-zh-cn-)) 颇有感觉,对于node的理解又加深了一层,感谢node给大家提供了这么好的开发环境,感谢webpack给大家带来强大的js依赖处理功能,感谢npm的包管理功能,感谢我自己强大的理解能力今天说的是node的包管理功能。从何说起先从这一页开始吧。我们在本地环境使用命令行创建一个文件夹叫做`testreact`;然后我们创建一个这样的目录+ /app - main.js - component.js+ /build - bundle.js (不需要你创建,会自动生成啊) - index.html+ webpack.config.js+ package.json然后对内容进行修改webpack.config.js```var path = require('path');module.exports = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', }, };```component.js```'use strict';module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello world'; return element;};```main.js```'use strict';var component = require('./component.js'); document.body.appendChild(component());```index.html```<\!DOCTYPE html><\html> <\head> <\meta charset="UTF-8"/> <\/head> <\body> <\script src="bundle.js"><\/script> <\/body> <\/html>```然后 `npm i webpack --save`安装`webpack`依赖然后就是修改package.json```{ "scripts":{ "build":"webpack" }}```然后是你重新执行`npm i webpack --save`会发现在`package.json`中自动包含了这个东东```{ "scripts": { "build": "webpack" }, "dependencies": { "webpack": "^1.11.0" }}```它自动增加了`dependencies`节点就是用来说明这个的 本章节内容啰嗦这么多其实也就是为了这一个地方当你执行`npm i react --save`的时候又会自动增加react还要说明的就是那个`build` 其实是这样子理解的我们在终端中这样输入```nom run build```这时候运行的就是 `wepack`这个东西就像是一个alias 让我们可以用一个简短的名字来执行一个复杂的命令```fengliu@fengdeMacBook-Air [02:17:27] [~/www/class]-> % cnpm run build> @ build /Users/fengliu/www/class> webpackHash: b9fec71d6d7c9dd1b347Version: webpack 1.11.0Time: 74ms Asset Size Chunks Chunk Namesbundle.js 1.74 kB 0 [emitted] main [0] ./app/main.js 98 bytes {0} [built] [1] ./app/component.js 169 bytes {0} [built]```#update 2015-08-31需要注意的一点是 在使用`npm install`时只有加入了`--save`参数才会在`package.json`中增加这个相关内容
发表评论
叁 乘 肆 =
评论通过审核后显示。