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天生就对Es6语法的支持非常友好,加上其首创的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']
    }
}