KOA学习笔记-装备篇
发布在KOA2学习2017年3月27日view:2429前端开发ES6ReactBettieslintwebpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

KOA学习笔记-装备篇


写在前面的话

什么前端工程师要取代后端工程师,是谁给了你们这么大的自信呢?nodeJS的诞生,无疑是给后端工程师们一定的压力,取代不取代我们暂且不说,但是从简单的写HTML到复杂的后端逻辑,前端工程师们确实发展迅速。尤其是ES6的出现,让JS也能和后端语言一样的开发方式。我一直坚信javascript是世界上最好的语言没有之一,我虽没有引领风骚的能力,但是还不让我随波逐流吗?所以我也会装模作样的在各个渠道找寻nodejs的知识。无意看了一篇KOA的帖子,发现我ES6都还没学习好,ES7又特么的出来了,还能不能愉快的编码了。一直在追寻,从未入过门。决定去学习他,把学习的过程记录下来,能不能坚持不知道,反正先学着吧!
先说说工具吧,自从用了sublime,就没停下来,今天就先来吧工具准备好。其实就是增加语法高亮和语法检查而已。

eslint 的安装

选择插件工具的标准

1、 支持es6吗,支持ES7吗?
2、 支持JSX?
3、 支持各种工程化工具吗?

你没猜错eslint都能满足你,eslint 本身不支持ES7,但可以使用babel-eslint。
话不多说,直接上酸菜

先安装两个nodejs插件

npm install eslint -g
npm install babel-eslint -g

在sublime里安装eslint插件

  1. 安装 SublimeLinter
    调出package control搜索SublimeLinter进行安装

  2. 安装 SublimeLinter-contrib-eslint
    调出package control搜索eslint安装即可,全名:SublimeLinter-contrib-eslint。注意:该插件只支持Sublime text 3

在项目根目录编写配置文件: .eslintrc

{
    "env": {
          "browser": true,
          "node": true,
          "es6": true
    },
    "parser": "babel-eslint",
    "ecmaFeatures": {
           "jsx": true
    },
    "rules": {
           "semi": [2, "always"],
            "quotes": [2, "single"]
    }
}

编写完成后放至你项目根目录下即可。
window用户可用命令提示符生成该文件:echo {} > .eslintrc
然后再重新启动你的sublime,你就会看到像下面这样的结果

enter sublime展示的错误信息

红色的点点就表示不符合ES7的语法,点击小点点,sublime底部会展示出错误的信息 enter sublime报错具体信息

然并卵对于我这个英语文盲来说相当于没提示,但是我们有工具啊。
看到下面那一串英语中加括号的短语吗?那个就是语法规则名称,拷出来在官网上一查,虽然还是特么的英语,但是有实例啊,看代码可是程序员的强项啊。直接展示。 enter 官网对错误消息的解释

第一个箭头就是你要输入的规则名称,看不懂英语,巴特,你还看不懂手势吗?真是体贴。 再来甩出官网的查询地址 enter eslint官网

如果我是个马大哈,在编辑器上还不能完全杜绝我出错,辣么我们就在代码构建打包的时候再检测一下。

在React+Babel+Webpack环境中使用ESLint

在webpack配置中使用eslint加载器
webpack.config.js

module: {
    loaders: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'react-hot!babel'
    },
    {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader'
    }]
},

我们既可以在webpack配置文件中指定检测规则,也可以遵循最佳实践在一个专门的文件中指定检测规则。我们就采用后面的方式。 创建文件.eslintrc 并引入 webpack.config.js
webpack.config.js

devServer: {
    contentBase: './dist',
    hot: true,
    historyApiFallback: true
},
eslint: {
    configFile: './.eslintrc'
},

现在可以启动app了,在根目录下

ESLint + Babel

之前,我们已经安装了babel-loader(在起步工程中)来转换我们的代码。现在我们可以将它和eslint-loader一同使用。
webpack.config.js

module: { 
    loaders: [ 
        { 
            test: /\.jsx?$/, 
            exclude: /node_modules/, 
            loader: 'react-hot!babel' 
        }, 
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loaders: ['babel-loader',  'eslint-loader'] 
        } 
    ] 
},

我自己没用这种方法,不是道是因为我装的是babel而不是babel-loader的缘故还是什么原因我用的是下面的方式
使用webpack的preLoaders

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
        }
    ],
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_mudules/,
            loader: 'jsx-loader'
        },
        {
            test: /\.(es6|js|jsx)$/,
            exclude: /node_mudules/,
            loader: 'babel',
            query:
            {// 没加stage-1,无法使用es6的箭头函数
                presets: ['es2015', 'react', 'stage-1']
            }
        }
    ]
}

这样我们就可以在webpack构建工程的时候来检测自己的代码了。
本来还想写rule规则和eslint结合git来实现。先存着,能编辑就继续,不能就新开。 这个只是个人笔记,大部分还是来源于网络上大牛的指导。文章也没得商业用途,各位看官提技术上的意见和建议!

评论
发表评论
暂无评论
WRITTEN BY
mailylqj
世界是那么寂静,我只能听到自己的心跳,当我思念的时候,你刚好也在想我吗?
TA的新浪微博
PUBLISHED IN
KOA2学习

KOA2从入门到放弃

我的收藏