迈向全栈开发学习(1)

2018-06-24 00:00:27来源：未知阅读 ()

写在前面：

　　本人从事软件开发方面三年了，一直是从事着.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。最后附上今天跑步的成绩，打代码不忘运动，防止肚腩逆生长。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：js中事件绑定要注意的事项之如何在方法中自己打印自己的值

下一篇：Vue实例

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签