小白開始學習前端全棧之node的包管理

2015-08-31 01:17:00
hainuo
原創 2291
摘要: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`中增加這箇相關內容
發錶評論
零 乘 叄 =
評論通過審核後顯示。