ybyc / fe-blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 2.0 1.0 3 KB

前端开发总结，大家有什么好的点子都可以写进去

fe-blog's Introduction

fe-blog

Vue系列

Vue项目常见问题汇总

项目打包后图片相对路径问题

Vue全局引入sass文件-使用全局变量和mixin

Git系列

前端项目Git工作流（初版）

webpack系列

webpack打包优化

fe-blog's People

Contributors

Watchers

Forkers

wensiyuanseven

fe-blog's Issues

[Vue]项目打包后图片相对路径问题

由于vue中webpack的默认配置，静态资源是放在服务根目录的，但是实际场景中通常需要将build后的文件放到相对路径中，所以需要修改config/index.js配置中的assetsPublicPath: './'。

但是这样带来的问题就是css图片的引用地址就会相对于/static/css目录，因此有两种解决办法：

一种是在webpack中build的配置文件增加拷贝img到css目录的功能。

另一种比较推荐的做法是在 build/utils.js 中的 ExtractTextPlugin.extract 传入参数 publicPath: '../../'

[Git]前端项目Git工作流（初版）

这一段开发时，常会因为git使用习惯不同造成一些麻烦，因此需要统一下git的使用。

该文档为不稳定版本，需持续优化，希望大家能一起完善，有问题望能及时指出。

以下情况以optimus后台项目为示例

一、分支介绍

1.master分支

master分支必须是可随时部署正式环境的分支，线上环境运行的项目均由master分支构建，master分支上的任何代码更改都只能从其他分支上merge过来。

2.dev分支

所有下个版本需要发布的功能，在测试的时候，需要先merge到dev分支。从dev分支构建的代码将上传到测试服务器进行测试。如在dev分支上测试的代码没有问题，则可将版本分支merge到master，并部署正式版本。因此通常项目上线完成后，master分支和dev分支的代码应该是一样的。

~~注意：如果不是下个版本要发布的功能，测试的时候不要merge到dev上。~~

3.版本分支（如：v2.0.5）

版本分支为日常版本升级所用分支，通常从master checkout出来，任何当前版本的新功能或修改，都从这个版本分支进行开发。

每次新版本开发开始时，开发成员可从此版本分支中checkout出自己的开发分支，开发完成后随时merge回版本分支。

4.维护分支（hotfix）

维护分支用于给正式环境版本快速生成补丁，由master分支checkout出来。修复完成后，修改应立即merge到master分支和dev分支。

merge到master分支时需要从gitlab上提交merge request，不能直接merge。

维护分支可让团队可以快速处理掉问题而不至于打断其他工作。当bug修复完成并已经合并到master分支后，需及时删除维护分支，避免分支太多造成混淆。

5.个人开发分支

从版本分支checkout出个人开发分支，该分支应为某个相对独立功能的分支，当该功能开发完成后，应merge到版本分支后，再进行其他功能的开发。

二、具体使用场景

假如现在需要开发新版本功能v3.0.0，需要A，B，C三人合作开发。

首先，从master分支checkout出来v3.0.0分支，每人再从v3.0.0分支checkout出自己的开发分支。

开发过程中，A开发完毕某个功能后，需要先更新v3.0.0分支的代码，然后把自己代码merge过去，并且适时把v3.0.0分支merge到自己的开发分支上，保持二者同步。

开发完毕后，可将master最新代码merge到v3.0.0上，然后部署后提交测试，测试中的问题可在v3.0.0分支上进行修改。

测试完毕后，在gitlab上提交merge request，管理员同意后将v3.0.0合并到master，合并后部署正式服务器。

若部署正式服务器后，出现bug，可从master分支checkout出bugfix分支，在该分支上进行修改，测试无误后提交merge request，合并到master分支后部署到服务器。提交后应及时删除bugfix分支。

三、特殊情况处理

若两个版本分支需要同时上线，可先从master分支checkout出一个新分支（如qs分支），然后将两个版本merge到qs分支，在qs分支上进行测试，测试无误后将qs分支merge到master分支上。
若合并中出现冲突的文件不是自己的，需要询问冲突文件的开发人，不要擅自修改

[Vue]Vue常见问题汇总

一、IOS10报错

项目在除了iOS 10之外的环境中运行没有问题，在iOS 10系统中会报错：

SyntaxError: Cannot declare a let variable twice: ‘e’.

定位到错误代码位置：

addClass: function(e) {
	if (void 0 === e) return this;
	const t = e.split(" ");
	for (let e = 0; e < t.length; e += 1)
		for (let s = 0; s < this.length; s += 1) void 0 !== this[s].classList && this[s].classList.add(t[e]);
	return this
}

这段代码是webpack编译出来的，本身是没有语法错误的，但iOS 10中的Safari会认为是错误，这个问题已经在iOS 11中修复，但我们的代码依然要为iOS 10系统买单。

解决办法：

打开build/webpack.prod.conf.js文件
在UglifyJsPlugin的定义里添加关于mangle的选项，如下:

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    },
    mangle: {
      safari10: true
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})

二、iOS 8中样式错乱问题

iOS8某些CSS样式（如transform）需要加浏览器前缀-webkit-，虽然vue项目中自带autoprefixer，但是默认配置为：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

默认配置在transform中是不会加前缀的，所以需要修改package.json配置如下：

"browserslist": [
  "> 1%",
  "last 10 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "ie > 8"
]

配置后build出来的代码就会兼容iOS8。

[Vue]Vue全局引入sass文件-使用全局变量和mixin

更新：新增vue cli 3.x项目的配置，请见最后

0.前言

在Vue项目中通常需要使用sass定义一些全局变量，如主题色、统一边距，或者需要定义全局的mixin，但是官方的vue webpack模板并不提供这样的功能，要想实现这些功能，只能在每个组件中import全局scss文件，非常不方便。

下面给出能通过修改webpack配置实现全局引入sass文件方法：

1.安装sass-resources-loader

npm install -D sass-resources-loader

2.修改build/util.js配置

在util.js中exports.cssLoaders方法return前边加入如下代码：

(其中scss文件路径需要根据自己项目情况修改为要添加的路径)

  // 引入全局scss>>>
  function resolveResouce(name) {
    return path.resolve(__dirname, '../src/assets/sass/' + name);
  }

  function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      // 'postcss-loader',
      'sass-loader', {
        loader: 'sass-resources-loader',
        options: {
          // it need a absolute path
          resources: [resolveResouce('global.scss')]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  // <<<

将return中的sass和scss改为如下代码：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

3. 重启服务

重启之后，在每个组件中就都可以使用全局的变量和mixin了

4. Vue cli 3.x项目中的配置

cli3中全局引入scss文件就很简单了，只需在vue.config.js中增加如下配置：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/styles/global.scss";'
      }
    }
  }
  // ...
}

[webpack]Webpack 打包优化

一、分析打包文件

使用webpack-bundle-analyzer可直接生成打包文件的分析图，对分析每个依赖和组件对于打包的影响有很大的帮助。

如何使用：

1.安装

npm install --save-dev webpack-bundle-analyzer

2.build/webpack.dev.conf.js中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

...

plugins: [
    new BundleAnalyzerPlugin(
      {
        analyzerMode: 'server',
        analyzerHost: '127.0.0.1',
        analyzerPort: 8889,
        reportFilename: 'report.html',
        defaultSizes: 'parsed',
        openAnalyzer: true,
        generateStatsFile: false,
        statsFilename: 'stats.json',
        statsOptions: null,
        logLevel: 'info'
      }
    )
    ...
  ]

3.开启服务后，将自动打开http://127.0.0.1:8889/，接下来就能看到：

二、使用DllPlugin

DllPlugin的原理是将通常不会变化的第三方库提前打包构建，然后直接在页面引入，在项目构建时不会再打包到vender文件中。

如何使用：

1.在build/下新建webpack.dll.conf.js文件，代码如下：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //需要打包的模块
  entry: {
    // 打包出来的文件名将以vender开头
    vendor: [
      'babel-polyfill',
      'vue',
      'vuex',
      'vue-router',
      'axios',
      'qs',
      'viewerjs',
      'vue-amap',
      'vue-awesome',
      'element-ui',
      'moment'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'), //打包后文件输出的文职
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      libraryTarget: 'commonjs2',
      name: '[name]_library'
    }),
    // 压缩打包后的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

然后运行webpack -p --progress --config build/webpack.dll.conf.js

运行完成之后会在build目录中生成一个vendor-manifest.json文件，这个文件是用来关联vender中配置的第三方模块的，打包的时候不会把这些文件打包进去。

同时在static下会有一个vendor.dll.js文件，这个就是dll打包出来的第三方模块。

下一步，修改buidl/webpack.base.config文件，增加如下代码：

const webpack = require('webpack')
const manifest = require('./vendor-manifest.json')

module.exports = {
  ...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest
    })
  ]
}

然后在index.html中增加<script src="./static/dll.vendor.js"></script>

然后执行npm run build，就会发现构建时间明显缩短了。

三、减小lodash打包文件体积

lodash是一个很有用的库，但我们往往只是用其中一部分方法，如果全部引入就会非常浪费。

所以，普通的优化方法是只引入用到的方法，如：

import flatten from 'lodash/flatten';
import flatMap from 'lodash/flatMap';

但是每次使用都要这么写还是有点麻烦的，所以接下来就要介绍一种只需正常引入使用lodash，就能自动按需打包的方法：

使用babel-plugin-lodash

babel-plugin-lodash可以将

import _ from 'lodash'
import { add } from 'lodash/fp'

const addOne = add(1)
_.map([1, 2, 3], addOne)

转化为

import _add from 'lodash/fp/add'
import _map from 'lodash/map'

const addOne = _add(1)
_map([1, 2, 3], addOne)

使用方法：

npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
.babelrc

{
  "plugins": ["lodash"]
}

然后打包出来的文件就会小很多

使用lodash-webpack-plugin

未完待续...

reference

https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
https://juejin.im/post/5a8797c15188257a836c385d