0%

在window下开发,自带的cmd不好用,所以在网上搜索到cmder。cmder挺好用的,但我有两点需求没设置好:

  • 1、别名设置
  • 2、启动界面自定义

先放官网,cmder,其他的详细介绍网上有很多了。

一、别名设置

先介绍一下我使用的环境,我用是win10+gitbash,在设置别名的时候不生效,我也查了很多,老版本的别名设置是写在config/aliases,我使用的版本是1.3.2,别名设置写在config/user-aliases.cmd,但是我的设置不生效,查了很多,目前实现的方法是在gibash安装目录etc/bash.bashrc中加入设置,这个是gitbash设置的别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//bash.bashrc

#打开当前文件夹
alias e.='explorer .'
alias ls='ls --show-control-chars -F --color $*'
alias clear=cls
alias gl='git pull origin $1'
alias glm='git pull origin master'
alias gp='git push origin $1'
alias gpm='git push origin master'
alias cpd='cap production deploy'
alias cpt='cap staging deploy'

# 设置使用webstorm打开文件,空格要使用'\'转义一下
alias wb='C:/Program\ Files/JetBrains/WebStorm\ 2017.1.4/bin/webstorm64.exe $1'

重启cmderalias设置生效了,哈哈。

二、启动界面设置

因为开发的目录特别多,每天都要重复打开开发目录。

一共8个目录,如果每次都要打开8个tab,还要进入不同的目录,简直要累死。
为了解决这个问题,打开cmder设置。

  • 1、先设置为自动,建好你需要设置的布局,重启cmder。
  • 2、将第三部份的配置保存在一个txt的文件中
  • 3、将设置改为tasks file启动,注意要在txt文件中改掉每个bash启动的目录。

大功告成。

2017年09月12日 更新了下window,window将cmd改成powershell了,不喜欢,将系统换成ubuntu

最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多。这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法。

两栏布局

  • 1、浮动
1
2
3
4
5
6
7
8
9
10
11
.box1 .left {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box1 .right {
margin-left: 100px;
height: 100px;
background-color: green;
}
1
2
3
4
<div class="box1">
<div class="left"></div>
<div class="right">两列自适应</div>
</div>
  • 2、定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box1{
position: relative;
width: 100%;
height: 100px;
}
.box1 .left{
position: absolute;
width: 100px;
height: 100%;
background-color: red;
}

.box1 .right{
margin-left: 100px;
width: 100%;
height: 100%;
background-color: green;
}
1
2
3
4
<div class="box1">
<div class="left"></div>
<div class="right"></div>
</div>
  • 3、flex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box1{
display: flex;
height: 100px;
}
.box1 .left{
width: 100px;
height: 100%;
background-color: red;
}

.box1 .right{
flex:1;
height: 100%;
background-color: green;
}
1
2
3
4
<div class="box1">
<div class="left"></div>
<div class="right"></div>
</div>

圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分,然后再开始加载 left 和 right 两个相对来说不是很重要的东西。

圣杯布局

圣杯布局给最外面加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度,然后利用相对定位把他们再移动在两旁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.box{
padding: 0 100px;/* 留出左右的距离*/
height: 100px;
}
.box .middle {
float: left;
width: 100%;
height: 100%;
background-color: yellow;
}
.box .left {
float: left;
width: 100px;
margin-left: -100%;
background-color: red;
position: relative;
left: -100px;/*往左拉*/
height: 100%;
}
.box .right {
float: left;
width: 100px;
margin-left: -100px;
background-color: green;
position: relative;
right: -100px;
height:100%;
}
1
2
3
4
5
6
<div class="box">
<!--注意顺序-->
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

双飞翼布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.box {
position: relative;
height: 100px;
}
.middle-wrap {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.middle-wrap .middle {
height: 100%;
margin: 0 100px; /*留出距离*/
background-color: yellow;
}
.left {
float: left;
width: 100px;
margin-left: -100%;
height: 100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 100%;
margin-left: -100px;
background-color: green;
}
1
2
3
4
5
6
7
<div class="box">
<div class="middle-wrap">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>

问题

在前端项目中,我们希望第三方库(vendors)和自己写的代码可以分开打包,vue-cli也帮我们配好了webpackCommonsChunkPlugin,但是在使用vue-cli的打包的过程中有一些痛点。

一、verdors缓存失效

改变了app.js的一点儿代码,verdors打包的chunkhash就会改变,导致每次发布,vendors的缓存都会失效。这样增加了用户的流量消耗和首屏加载时间。

二、项目打包时间过长

在公司的台式机打包一次要花费30s,在个人笔记本上则需要花费40s之多。

为了解决上述问题,在网上查找资料后,找到使用 webpack dll这个方案。

解决过程

一、编写dll配置文件

先贴上我的webpack.dll.conf.js配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var path              = require('path');
var webpack = require('webpack');
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 提取css
var AssetsPlugin = require('assets-webpack-plugin'); // 生成文件名,配合HtmlWebpackPlugin增加打包后dll的缓存
module.exports = {
entry: {
libs: [
'vue/dist/vue.esm.js',
'vue-router',
'vue-infinite-scroll',
'vue-cookie',
'vuex',
'jquery',
'iscroll',
'weui.js',
'video.js',
'babel-polyfill',
'resetcss',
'font-awesome/css/font-awesome.min.css',
'video.js/dist/video-js.min.css',
'element-ui',
'element-ui/lib/theme-default/index.css',
]
},
output: {
path: path.resolve(__dirname, '../public'),
filename: '[name].[chunkhash:7].js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, '../public/[name]-mainfest.json'),
name: '[name]_library',
context: __dirname // 执行的上下文环境,对之后DllReferencePlugin有用
}),
new ExtractTextPlugin('[name].[contenthash:7].css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}),
new AssetsPlugin({
filename: 'bundle-config.json',
path: './public'
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
}
  • 1、entry配置需要dll打包的库

  • 2、module配置处理对应文件类型的loader

  • 3、增加 webpack.DllPlugin插件

    • 1、path:生成mainfest.json文件的绝对路径。mainfest.json里面的内容为所有被打包到dll.js文件模块id的映射。
    • 2、namewebpack打包时mainfest.json包含的库的暴露出来的函数名名
    • 3、contenxt(可选):引入manifest文件的context,默认为webpackcontext

二、修改webpack.base.conf.js

webpack.base.conf.jsplugins增加

1
2
3
4
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../public/libs-mainfest.json') // 指向生成的manifest.json
}),

注:上面提到通过AssetsPluginHtmlWebpackPlugin给打包的dll.js各dll.css增加缓存机制

AssetsPlugin生成的bundle-config.js

1
2

{"libs":{"js":"libs.f7d8ef0.js","css":"libs.e2245d7.css"}}

webpack.dev.conf.js文件增加以下代码

1
2
3
4
5
6
7
8
9
10
var bundleConfig = require("../public/bundle-config.json")
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
libJsName:bundleConfig.libs.js,
libCssName:bundleConfig.libs.css,
env:config.dev.env,

}),

index.html引入生成的dll.js,dll.css

1
2
<link rel="stylesheet" href="./public/<%= htmlWebpackPlugin.options.libCssName %>">
<script src="./public/<%= htmlWebpackPlugin.options.libJsName %>"></script>

上面为开发环境的配置,生产环境对应修改就可以了。

  • 增加build.dll.js文件,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var path              = require('path');
var utils = require('./utils')

var webpack = require('webpack');
var config = require('../config')
var utils = require('./utils')
var dllConfig = require('./webpack.dll.conf');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');

var chalk = require('chalk')
var rm = require('rimraf')
var ora = require('ora')
var spinner = ora({
color: 'green',
text: '正为生产环境打包dll包,耐心点,不然自动关机。。。'
})
spinner.start()
rm(path.resolve(__dirname, '../public'), err => {
if (err) throw err
webpack(dllConfig,function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')

console.log(chalk.cyan(' dll打包完成.\n'))
})
});

  • 然后在package.json script中加上"build:dll": "node build/buildDll.js"

注:开发和生产环境都要首先使用 webpack运行webpack.dll.conf.js生成dll.js, dll.css, mainfest.json文件,每次改变库文件也都需要重新执行一遍。

三、对比结果

优化前笔记本上打包时间为4000ms,
优化后笔记本打包时间为1800ms,同时也增加了这些库的缓存。

vue2.0的项目中加入flow类型检查。当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难。为了解决这个问题,决定使用flow 加入类型检查。

一、flow了解

flow是fackbook公布的javascript静态类型检查器。 可以检查js中一些bug,eg:自动类型转换中出现的问题。flow官网

引用flow官网的介绍

flow is a static type checker for javascript

flow初体验

1
2
3
4
5
// @flow
let a:number = 2;
function foo(b:tring):boolean{
return false;
}

使用bebel转换后

1
2
3
4
let a = 2;
function foo(b){
return false;
}

从上面代码可以看出,使用flow后的代码更清晰明了。虽然使用注释也可以实现,但使用注释太繁琐,而且不直观。

二、flow的安装

flow可以直接通过npm或者yarn安装。官网推荐安装方式

这里以npm为例

npm install –save-dev flow-bin

安装完成后在package.json中加入下面的脚本

1
2
3
4
5
{
"scripts": {
"flow":"flow check"
}
}

同时还要安装babel编译器,将flow的类型检查代码从代码中剥离,转变成正常的js代码

npm install –save-dev babel-cli babel-preset-flow

在babel配置文件.babelrc中加入

1
2
3
4
{
"presets": ["flow"]
}

三、flow使用

配置flow

我的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue
module.file_ext=.js

  • 2、新建一个文件index.js
    1
    2
    // @flow 
    let a:number = '3';
    // @flow或者 /* @flow */告诉flow检查这个文件
    输入npm run flow 执行类型检查

注:在vue单文件组件使用flow需要额外配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* @flow
<template>
<div>
</div>
</template>
*/
// <script>
let a:string = 2;
console.log(a);
export default {
data(){
return {

}
}
}
// </script>
/*
<style scoped>
</style>
*/

注意:
1、 在注释template和style时使用/**/注释,在template和style内部不能再使用 /* */这种注释,这个不是flow不识别,本来就不应改/**/中嵌套/**/,应该在/**/中采用 // 注释风格
2、如果不想在.vue中使用注释的方法,可以在ide中安装flow,但是不能使用npm run flow来检查了。

webstorm中配置flow

配置webstorm,使其支持flow语法。官网ide配置

总结一下为3点:

  • 1、安装node包
  • 2、全局安装flow
  • 3、在框架设置中选择JavaScript flow

以上是我在vue2.0项目安装flow的全部过程。

参考文章: