邁向全棧開發學習(1)

 寫在前面：

　　本人從事軟件開發方面三年了，一直是從事着.net開發，可是我我的熱衷於前端開發，因爲開發經驗不足即便效勞過三家公司了也沒有真正去從事着前端開發這個職位，雖然如此可是我仍是專一着前端開發的（哪怕如今仍是半桶水）。爲了繼續好好的學習前端開發就藉此博客記錄下學習的心路歷程，把一直以來所學的捋一遍以及把現今流行的技術學習下，但願能有志之士能夠給在下提點一二，話已至此，進入個人學習吧。

1、（項目搭建）：

　　爲了能把學習的代碼一一記錄下來，因此地建一個項目，該項目我選用了webpack這麼個工具。

　　  Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。webpack詳情學習，請查閱webpack官網。

一、項目建立：

　　首先安裝好node.js，而後配置好淘寶鏡像便可執行如下命令。

1 mkdir Full-stack-development
2 cd Full-stack-development
3 npm init

二、webpack安裝

1 cnpm install webpack --save-dev
2 cnpm install html-webpack-plugin 
3 cnpm i webpack-dev-server --save-dev

三、es6加載器安裝

cnpm install babel-loader babel-core babel-preset-es2015 --save-dev

四、編寫webpack的配置文件

 1 const servers = require('./servers/index.js');
 2 const webpack = require('webpack');
 3 const htmlWebpackPlugin = require('html-webpack-plugin');
 4 
 5 module.exports = {
 6     entry: __dirname + '/src/main.js', //入口文件
 7     output: { //代碼輸出生成
 8         path: __dirname + '/dist', //生成路徑
 9         filename: 'bundle.js' //輸出文件名
10     },
11     module: { //loader模塊配置
12         rules: [{ //es6語法解析配置
13             test: '/\.js$/',
14             exclude: [/node_modules/],
15             use: [{
16                 loader: 'babel-loader',
17                 options: { presets: ['es2016'] }
18             }],
19         }]
20     },
21     devServer: { //生成環境構建
22         port: 7777,
23         host: 'localhost',
24         historyApiFallback: true,
25         setup: function(app) { //使用nodejs做代理請求或後臺數據構造
26             servers(app);
27         },
28         hot: true //熱更新開啓
29     },
30     plugins: [ //webpack插件配置
31         new htmlWebpackPlugin({
32             title: 'Full-stack-development'
33         }),
34         new webpack.HotModuleReplacementPlugin() //webpack自帶的熱更新插件
35     ]
36 }

五、hello word 運行

person類建立

 1 export default class person {
 2     constructor(name, text) {
 3         this.name = name;
 4         this.text = text;
 5     }
 6 
 7     say() {
 8         return `${this.name}說：「${this.text}」`;
 9     }
10 }

mian 入口文件

1 import person from './person.js';
3 let p = new person('webpack', 'hello');
4 document.write(p.say());

六、項目運行：

在運行項目前，在package.json中添加如下代碼，方便輸入執行命令

1   "scripts": {
2     "test": "echo \"Error: no test specified\" && exit 1",
3     "build": "webpack",
4     "server": "webpack-dev-server"
5   },

運行項目命令

1 npm run server

打包命令爲

1 npm run build

運行結果：

 源碼地址：https://github.com/codeyoyo/Full-stack-development.git

第一章就到此結束，接下我要繼續找資料學習下es6。最後附上今天跑步的成績，打代碼不忘運動，防止肚腩逆生長。