Skip to content

Home

Jump to bottom
Lee edited this page Apr 10, 2017 · 1 revision

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来实现。先存着，能编辑就继续，不能就新开。 这个只是个人笔记，大部分还是来源于网络上大牛的指导。文章也没得商业用途，各位看官提技术上的意见和建议！

Clone this wiki locally