邁向全棧開發學習(1)

 寫在前面：

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

第一章（項目搭建）：

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

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

1、項目創建：

　　首先安裝好node.js，然後配置好淘寶鏡像即可執行以下命令。

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

2、webpack安裝

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

3、es6載入器安裝

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

4、編寫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 }

5、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());

6、項目運行：

在運行項目前，在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

運行結果：

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