DUMP101 企业级电商FE
需求拆分原则
1. 单个迭代不能太大
2. 需求可交付，功能闭环
3. 成本意识 二八法则
4. 预期价值体现
……………………………………………………………………………… 做
【直接 git clone】or【重新初始化】
cd <your-path>
git init
git remote add origin <url>
git pull origin master
git add .
git commit -am ""
git push
<要求设置一个上游分支>
【vim .gitignore】push之
git checkout -b <branchname_v1.0.0>
【structure】
$ ls
image/ page/ service/ util/ view/
【npm init】
【webpack】commonjs 过来的，前进是 ES6 。(进一步说明 loader是webpack核心)
npm install -g webpack@1.15.0 ， 可以省略版本安装最新但最新的 命令要安装 webpack-cli
npm install webpack@1.15.0 --save-dev
【webpack <entry> <output> 演示目的】or 【webpack.config.js】
var config = {
entry: {
index: ['./src/page/index/index.js'],
login: ['./src/page/login/index.js'],
},
output: {
path: './dist/',
filename: 'js/[name].js',
}
};
module.exports = config;
【加载 window全局对象下 jQuery】
var config = {
entry: {
index: ['./src/page/index/index.js'],
login: ['./src/page/login/index.js'],
},
output: {
path: './dist/',
filename: 'js/[name].js',
},
externals: {
jquery: 'window.jQuery'
}
};
module.exports = config;
【使用 commonchunk plugin抽取公共模块】https://webpack.js.org/plugins/commons-chunk-plugin/#src/components/Sidebar/Sidebar.jsx
1. 注意 common 是一个公共全局模块
var webpack = require('webpack');
var config = {
entry: {
common: ['./src/page/common/index.js'],
index: ['./src/page/index/index.js'],
login: ['./src/page/login/index.js'],
},
output: {
path: './dist/',
filename: 'js/[name].js',
},
externals: {
jquery: 'window.jQuery'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: "js/base.js"
})
]
};
module.exports = config;
【加载 css 的 loader】or 【单独打包 plugin + loader】
注意 ExtractTextPlugin + module loader配置
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var config = {
entry: {
common: ['./src/page/common/index.js'],
index: ['./src/page/index/index.js'],
login: ['./src/page/login/index.js'],
},
output: {
path: './dist/',
filename: 'js/[name].js',
},
externals: {
jquery: 'window.jQuery'
},
module:{
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: "js/base.js"
}),
new ExtractTextPlugin("css/[name].css")
]
};
module.exports = config;
【html 模板处理】HtmlWebpackPlugin
// 获取HtmlWebpackPlugin配置
var getHtmlConfig = function (name) {
return {
template: 'src/view/' + name + '.html',
filename: 'view/' + name + '.html',
inject: true,
hash: true,
chunks: ['common', name],
};
};
。。。
plugins: [
// 独立通用模块抽取到 base.js
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: "js/base.js"
}),
// 单独打包 css
new ExtractTextPlugin("css/[name].css"),
// 打包 html 模板
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login')),
],
【进一步从 html 本身动手，抽取 <head>】npm i -D html-loader
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
]
},
【自动刷新 webpack-dev-server】npm i -g webpack-dev-server@1.16.5
要执行 webpack-dev-server --inline --port 8088
先做这个事情
output: {
path: './dist',
publicPath : '/dist', //发布公共位置
filename: 'js/[name].js'
},
最佳实践 WEBPACK_ENV + npm scripts
// 环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev'; if('dev' === WEBPACK_ENV){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
修改成 npm scripts
"scripts": {
"dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
"dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
"dist": "WEBPACK_ENV=online webpack -p",
"dist_win": "set WEBPACK_ENV=online && webpack -p"
},
然后可以 npm run dev_win 运行命令~~~
【脚手架搭建好了】
git add .
git commit -am "脚手架搭建完成"
git push
git merge origin master
……………………………………………………………………………………………………想
【新建 git 项目】说的是 git init / git clone
【git 权限配置】说的 ssh
【gitignore】忽略且不跟踪的文件
【文件目录划分】Project structue
【git 分支使用规范】主干 + 分支 v1.0 这样方式迭代
【npm 初始化】npm init -> package.json
【安装/卸载 npm 包】npm i
【npm 机制】下载过放到 cache ，项目还是会下载一份。
【npm 命令】npm scripts
【webpack 设计思想】核心是 loader + plugin 。
【webpack 编译原理】/dist 处理方式 变成 base64 ，字符串 ，需要直接emmit源文件需要自己配置。
【webpack.config.js 演进】搭积木。
【js loader】
【js 多入口配置】
【目标文件按文件类别存放】
【jquery 引入方式】cdn window.jQuery
【提取通用模块】common插件，这个在webpack4.0版本已经废除。
【css loader】
【css 打包成单独文件】
DUMP101 企业级电商FE的更多相关文章
- DUMP102 企业级电商FE
101 完成 webpack 配置后,有一套类似 live-reload 自动刷新提供 REPL 环境. [配置 webpack.config.js 别名,方便 js 文件做require 支持路径别 ...
- Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式
史诗级Java/JavaWeb学习资源免费分享 欢迎关注我的微信公众号:"Java面试通关手册"(坚持原创,分享各种Java学习资源,面试题,优质文章,以及企业级Java实战项目回 ...
- Java从零到企业级电商项目实战
欢迎关注我的微信公众号:"Java面试通关手册"(坚持原创,分享各种Java学习资源,面试题,优质文章,以及企业级Java实战项目回复关键字免费领取)回复关键字:"电商项 ...
- DUMP2 企业级电商项目
正常设计数据库表,按照数据流向. ~~闭环核心业务 [1用户]登录 =>浏览[2分类]+浏览[3商品]=>加入[4购物车]=>结算[5订单]+[6收货地址]=>[7支付] [购 ...
- 从0到上线开发企业级电商项目_前端_01_sublime使用技巧
一.用户设置 { "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme", &quo ...
- DUMP 5 企业级电商项目
[订单模块] 创建订单 商品信息 订单列表 订单详情 取消订单 订单列表 订单搜素 订单详情 订单发货 [创建订单] 购物车勾选商品 涉及 Cart Product => 一个商品 ...
- DUMP 3.8 企业级电商项目 支付宝之类
① 沙箱登录:https://openhome.alipay.com/platform/appDaily.htm 获得一个 使用环境描述 APPID.授权回调地址.沙箱钱包哪里下载之类的 ② 沙箱环境 ...
- DUMP3.5 企业级电商项目
购物车模块 加入商品 更新商品数 查询商品数 移除商品 单选/取消 全选/取消 购物车列表 [浮点型商业运算精度丢失问题]ej1st 一书提到 float double只适合科研计算,BigDeci ...
- DUMP3 企业级电商项目
[开发模式]controller - service(合法校验问题) - dao 反过来也没问题 用户模块 登录 注册 用户名验证(实时反馈前端) 忘记密码 重置密码 退出登录 更新用户信息 获取 ...
随机推荐
- hashCode()方法对HashMap的性能影响
HashMap的put()方法会比较key的hash值,key的hash值获取方式如下: //HashMap的put方法 public V put(K key, V value) { return p ...
- yum源 Python3 Django mysql安装
yum 源安装 yum源位置: yum源仓库的地址 在/etc/yum.repos.d/,并且只能读出第一层的repo文件 yum仓库的文件都是以.repo结尾的 linux软件包管理 yum工具如同 ...
- Linux内核入门到放弃-网络-《深入Linux内核架构》笔记
网络命名空间 struct net { atomic_t count; /* To decided when the network * namespace should be freed. */ a ...
- 网易云歌词解析(配合audio标签实现本地歌曲播放,歌词同步)
先看下效果 github上做的一个音乐播放器: https://github.com/SorrowX/electron-music 中文歌曲 英文歌曲(如果有翻译的中文给回返回出去) 韩文歌曲 来看下 ...
- java8 Lambda表达式的新手上车指南(1)--基础语法和函数式接口
背景 java9的一再推迟发布,似乎让我们恍然想起离发布java8已经过去了三年之久,java8应该算的上java语言在历代版本中变化最大的一个版本了,最大的新特性应该算得上是增加了lambda表达式 ...
- [Oracle维护工程师手记]Data Guard Broker中改属性是否需要两侧分别执行？
Data Guard Broker中改属性是否需要两侧分别执行? Data Guard Broker有一些属性,可以通过 show configuration 看到.我有时会想,这些个属性,是否是分别 ...
- Spring+SpringMVC+Hibernate小案例（实现Spring对Hibernate的事务管理）
原文地址:https://blog.csdn.net/jiegegeaa1/article/details/81975286 一.工作环境 编辑器用的是MyEclipse,用Mysql数据库,mave ...
- Python--day03（变量、数据类型、运算符）
day02主要内容回顾 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识 ...
- Flutter之Color
color:颜色Colors.green ,系统默认了几种颜色,分别如下: red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, ...
- 二、IIS部署WebApi
一.项目发布 二.hosts 更改 C:\Windows\System32\drivers\etc 三.网站搭建 之后我将端口默认更改 8001 以防与80端口冲突 注意: 1.先测试IIS的lo ...