前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】

前言

回顾 4、5 年前开始,我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来,方便查阅与使用。4、5 年前,那应该还算是一个 jQuery 一招鲜的年代,使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件,基本可以解决一切的问题;但随着前端 MVC 的框架 backbone.js 已经被广泛应用,虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心,紧接着就是 AngularJS、React、Vue.js 的兴起,再到前端实现多端 / hybrid APP 广泛应用(React Native,Weex,phoneGap,Ionic,Electron / nw.js,Flutter);往后再有 微前端 / 低代码前端 / 前端机器学习 TensorFlow.js 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主,现下面重新整理一下,逐渐增加一些新的东西吧 继续阅读“前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】”

Typescript+Gulp+Babel 常用前端流程自动化配置

前言

近期要开发一个 APP Webview 与 H5 交互的 js sdk,终于找到机会可以尝试使用 typescript 来开发 js sdk 库啦。按下面的配置文件使用 npm init 先初始化了项目,然后执行 npm install 或者 yarn install 按装相关的依赖包吧,这样就可以愉快的使用 typescript 来开发自己的 js 库了, 继续阅读“Typescript+Gulp+Babel 常用前端流程自动化配置”

Gastby V2 安装过程中常见问题

前言

之前在 cnblogs 上写过一篇《Gatsby 上手指南 – 让你的静态网站用 react 来高逼格的写》介绍 Gastby V1 版本的使用,但现在 V2 版本出来了,想尝尝新,发现这版本改动不是一般的大,单单是安装过程就已经要折腾许久,安装方式也有点不一样,以前 V1 版直接建议全局安装 Gastby 脚手架,然后通过脚手架来初始化创建项目,V2 版则建议使用 npm 的新命令 npx 来临时安装 Gastby 脚手架,然后初始化 Gastby 项目后,脚手架会自动被删除,官网也有解释原因是因为怕用了不同的版本会导致依赖包混乱导致一些依赖关系错误问题。下面就罗列一些安装过程中可能遇到的坑: 继续阅读“Gastby V2 安装过程中常见问题”

调试App的Webview里面的h5网页的几种最有效方式

前言

在做APP开发时,为了增加功能的灵活性、便即时更新内容和减少客户端开发人员的工作量不免要嵌入许许多多的H5网页,这就是我们通常所说的Hybrid APP开发。在这过程中,我们经常要对h5里面的js及html代码进行调试,如果我们用最傻瓜式的方式来调试可以使用js的alert把想要调试的内容打印出来。但这种方式非常不灵活也不便于即时更新代码进行调试。 继续阅读“调试App的Webview里面的h5网页的几种最有效方式”

使用 Rollup 打包基于 Es 6 编写的 javascript 库的一般配置

前言

近期项目需要给APP编写类似于 jweixin-1.0.0.js 这样的桥接 APP 与 Webview 中 H5 页面的 js-sdk 类库,使用 gulp、gruntjs 或者 webpack 来搞有点重,因为 rollup 天生就对 Es 6 语法的支持非常友好,加上其首创的 tree shaking 技术使得打包出来的 js-sdk类库文件体型更小,还有官方也是非常推荐使用 rollup 进行 js 类库的开发,于是直接选用 Rollup 来自动化沟建非常适合。 继续阅读“使用 Rollup 打包基于 Es 6 编写的 javascript 库的一般配置”

在 vscode 中使用 eslint + eslint-config-prettier + eslint-plugin-prettier 报错问题

使用 vscode 编辑器,在前端项目中,使用 eslint + eslint-config-prettier + eslint-plugin-prettier 有可能会报下面的错误

[eslint] Delete `␍` [prettier/prettier]
原因可能是不同的操作系统下,甚至是不同编辑器,不同工具处理过的文件导致换行符的改变 。

解决方法:

可以修改 .eslintrc 文件,在 rules 添加一条

"prettier/prettier": "off"

vue 项目中如何配置 eslint fix?

修改 package.json 文件,把 script 的 lint 项改成如下:

"lint": "eslint --fix --ext .js,.vue src test/unit"

Vue 项目的 eslint 配置可参考:

https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

vue 项目常见 eslint 配置

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

    // add your custom rules here
    // base on https://github.com/vuejs/eslint-config-vue
    rules:{
        // 缩进为2个空格
        'vue/html-indent': ['error', 2, {
            'attribute': 1,
            'alignAttributesVertically': true,
            'ignores': []
        }],
        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],
        'vue/html-self-closing': 'off',
        "vue/name-property-casing": ["error", "PascalCase"],
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 关闭检测函数名称和调用它的左括号之间的空格
        // 'func-call-spacing': 'off',
        // 缩进为2个空格
        'indent': ['error', 2],
        // 关闭检测未使用的变量
        'no-unused-vars': 'off',
        // 对象展开时总是要添加逗号,一行时行末不需要逗号
        // 'comma-dangle': ['error', 'always-multiline'],
        // 定义函数时,函数括号之前允许添加空格
        'space-before-function-paren': ['error', 'always'],
        // 关闭禁用无效标签
        'no-tabs': 'off',
        // 关闭空行检测
        'no-multiple-empty-lines': 'off',
        // 关闭模板字符串检测
        'no-template-curly-in-string': 'off',
        'no-console': 'off',
        // 禁止添加分号
        'semi': ['error', 'never']
    }
}