Badge
更新说明
webpack4-vue和webpack3-vue包含的文件夹完全一致webpack4-react和webpack3-react包含的文件夹完全一致- 考虑到一致就没有在代码中再复制一份了,若有需要请自行拷贝
- 开发环境已经做了热重载,若想开发环境兼容ie11以下,请清除热重载
- 文件
.babelrc的plugins中移除react-hot-loader/babel package.json的devDependencies中移除react-hot-loaderconfig/opt.dev.js中devServer.inline必须为false(vue只需修改这一处)- 代码中移除
react-hot-loader
- 文件
- 开发环境已经支持前端
mock api,会自动读取src/mock下的文件,并进行热更新,代码逻辑在config/mock.js, 其中有example示例 vue和vue-template-compiler版本必须完全一致,否则有不可预见错误config目录webapck134,react,vue配置已统一,不同项目仅需改opt.self.js即可readme说明有遗漏,麻烦移驾到文件中看代码注释,关键点在config目录中的文件均有注释和官方参考文档地址devDependencies被用来放锁版本的依赖了,dependencies是保持最新的依赖;由于不用发布到npm上,因此这个分类比较随意,甚至说是错误的;若要发布,请做好区分,具体细节谷歌百度找文档- 由于
DllPlugin和CommonsChunkPlugin或splitChunks存在功能重复,而且前者需前置执行一次webpack命令,另外可以用externals来简单替代,后者可操作的空间大,可以自由拆包,使文件大小更均匀,故后续将不再使用DllPlugin
环境准备工作
- 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org - 管理员身份运行
npm i -g npminstall - 命令行进入当前目录,运行
npminstall -c - 若出现报错,常用解决办法如下:
- 管理员身份运行
npm cache clean -f和npm cache verify -f - 删除
node_modules目录 - 重新运行
npminstall -c - 最后换一个好点的网络,升级
node和npm
- 管理员身份运行
- 使用注意:
npminstall -c和npm install不兼容,前者比后者快很多,但是不能混着用- 切换使用需要删除
node_modules文件夹 node-v12.0.0有问题请先别升级,node-v12的最新版已经没有问题- 偶尔出现莫名其妙的打包错误或代码错误,删除
node_modules重试
开发坏境启动
npm start- 需要支持 ie 时请用
npm run env -- FOR_IE=1 npm start
- 浏览器打开 http://localhost:8888
生产坏境部署
npm run app- 需要支持 ie 时请用
npm run env -- FOR_IE=1 npm run app
- 拷贝 dist 文件夹内容至服务器即可
新增其它功能
npm run report查看生产包 bundle 组成- 需要支持 ie 时请用
npm run env -- FOR_IE=1 npm run report
npm run debug新增断点调式启动,端口 7777- 需要支持 ie 时请用
npm run env -- FOR_IE=1 npm run debug
更新 package.json
- 安装
npm i -g npm-check-updates - 在
package.json目录执行ncu(查看)ncu -u(更新)
使用 react-hot-loader 热重载
package.json的devDependencies中加入react-hot-loaderwebpack.cfg.dev.js的devServer.inline一定要为true.babelrc的plugins中加入react-hot-loader/babel- 启动命令增加
--hot, 勿同时使用HotModuleReplacementPlugin export根组件加修饰,并且在react前引入react-hot-loader
import { hot } from 'react-hot-loader';
export default hot(module)(App);
注: 仅4.3.12支持ie8+react@0,且需要一个小变更,已在脚本内完成
图片处理
- 普通图片 => https://tinypng.com
图片压缩=>url-loader(4kb以下) - svg图片 => https://github.com/svg/svgo
svg压缩=>svg-url-loader
// 建议4kb以下使用,较大文件建议用file-loader
const src = require("!svg-url-loader?noquotes!./x.svg");
webpack 3 4 支持 ie8 研究
- DllPlugin 打包后的代码未经过转换, 极大可能存在不兼容问题, 因此打包速度无法较大提升
- hot reload 原理是 Object.defineProperty, ie8 不支持
- 无法使用最新 react/antd, react@0.x/antd@1.x 才支持 ie8; vue直接就不支持ie8
- 至此 webpack 3 4 的一些优势近乎都不支持, 暂不考虑 webpack 3 4, 而且网上版本的兼容性都不是很好
- 如果实在想用 webpack 3 4 兼容 ie8, 以下一些提供参考, 但未做测试(应该是都有问题)
代码规范参考
- http://eslint.cn/docs/rules
eslint规则文档 - https://github.com/yuche/javascript
js规范中文版 - https://github.com/airbnb/javascript
js规范es5,es6,react - https://github.com/JasonBoy/javascript/tree/master/react
react规范中文版 - https://github.com/sivan/javascript-style-guide/tree/master/es5
es5规范中文版 - 常用
esling配置eslint-config-eggeslint-config-react-appeslint-config-ali
个人代码习惯(因人而异,选择你认为对的,仅供参考)
关于文件末尾留一空行
- 个人按照习惯来, 团队开发通过自动
eslint --fix来统一
关于代码缩进
- 个人按照习惯来, 团队开发通过自动
eslint --fix来统一 - tab和空格争论不休:不追求html的attr换行对齐和css的冒号对齐,tab没什么不好;如果要追求对齐那还是空格吧
关于引号
- js统一双引号,字符串内的双引号统一
\",单引号\x27,双引号\x22,那样就统一双引号了 - css统一双引号,content内容必须转义,防止出现乱码
- css/less/scss,很多时候可以用双引号代替单引号,而且某些情况下单引号编译时会有问题,另外html标签也是用双引号,正好都统一双引号了
是否加逗号
- 如果没有语法错误, 那就加上吧, 那样改动的diff也会少点
是否加分号
- 如果没有语法错误, 那就加上吧, 那样改动的diff也会少点
关于定义变量
- 如果是单独定义,一个变量一行,优先const,使用let而不用var
- 如果可以,尽可能用对象或数组的解构形式进行赋值
关于import顺序
- 最优先引入polyfill, React/Vue次之
- 其次是模块目录(node_modules)内, 优先模块路径深度排序, 依次按照(组件>函数>常量)分类和排序
- 然后是凭借loader媒介加载的, 如:promise-loader
- 再就是是开发目录(dev_dir)的, 依次按照(组件>函数>常量)分类和排序
- 引入样式文件, 依次按照(node_modules>dev_dir)分类和排序
- 引入图片文件, 依次按照(node_modules>dev_dir)分类和排序