迈向全栈开发学习(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

运行结果：

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

第一章就到此结束，接下我要继续找资料学习下es6。最后附上今天跑步的成绩，打代码不忘运动，防止肚腩逆生长。