Javascript的项目与babel和eslint

最近开始弄hubot，顺带也开始学习 javascript ，首先从单独一个 nodejs 项目开始：

nvm 和 node 的安装使用在前面已经说过了： Nodejs多版本的安装与管理

新建一个项目目录，build01

然后在其下建立如下目录结构：

mkdir build01

cd build01
mkdir es6 dist

mkdir public
cd public
mkdir es6 dist

解释一下，es6 下放的是服务器端的源代码，dist 下放的是服务器端处理过的源代码。

public/es6 放的是浏览器端的源代码，public/dist 放的是浏览器端处理过的源代码。

一、安装gulp和babel

babel 是用来做 js 格式转换的，注意，原有的 babel-preset-es2015 已经不适用了。

npm install --save-dev gulp gulp-babel babel-preset-env@next

生成一个.babelrc 文件，内容就一行

{ "presets": ["env"] }

在 es6 目录下，建立一个测试的 test.js 文件，内容如下：

'use strict';

const sentences = [
  { subject: 'JavaScript', verb: 'is',  object: 'great' },
  { subject: 'Elephants',  verb: 'are', object: 'large' },
];

function say({ subject, verb, object }) {
  console.log(`${subject} ${verb} ${object}`);
}

for ( let s of sentences) {
  say(s);
}

仔细看，上面这个文件用到了 es6 的语法，对象的解构，of语法。

我们来用 babel 把它转换一下，变成 es5 的语法

在build01目录下，生成gulpfile.js，内容如下：

const gulp = require('gulp');
const babel = require('gulp-babel');


gulp.task('default', done =>{

  gulp.src("es6/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("dist"));

  gulp.src("public/es6/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("public/dist"));

  done();
   
});

注意上面，**表示洞穿所有子目录。运行 gulp ，就会在 dist 目录下生成新的 test.js ，内容如下：

'use strict';

var sentences = [{
  subject: 'JavaScript',
  verb: 'is',
  object: 'great'
}, {
  subject: 'Elephants',
  verb: 'are',
  object: 'large'
}];

function say(_ref) {
  var subject = _ref.subject,
      verb = _ref.verb,
      object = _ref.object;
  console.log("".concat(subject, " ").concat(verb, " ").concat(object));
}

for (var _i = 0; _i < sentences.length; _i++) {
  var s = sentences[_i];
  say(s);
}

仔细看，es6 的语法变成 es5 的语法了。

二、安装eslint

babel 是对语法进行转换，那么 eslint 就是对语法作出规范，很多人吃 airbnb 那一套规则。

npm install --save-dev eslint gulp-eslint gulp-if

安装完成后执行命令进行初始化：

eslint --init

会提问一堆问题：

How would you like to use ESLint? … 
▸ To check syntax, find problems, and enforce code style
  
What type of modules does your project use? … 
▸ JavaScript modules (import/export)  

Which framework does your project use? … 
  React
  Vue.js
▸ None of these

Does your project use TypeScript? ‣ No / Yes

#两个都选哦
Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

How would you like to define a style for your project? … 
▸ Answer questions about your style

✔ What format do you want your config file to be in? · JSON
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? · Yes

最后得到文件 .eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

这里注意，要改两个地方：

"es2021": true,
改成
"es6": true,

"ecmaVersion": 13,
改成
"ecmaVersion": 10,

然后我们改写一下 gulpfile.js，增加 eslint 的部分

const gulp = require('gulp');
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');
const gulpIf = require('gulp-if');

function isFixed(file) {
  return file.eslint !== null && file.eslint.fixed;
}

gulp.task('default', done =>{

  gulp.src(["es6/**/*.js", "public/**/*.js"])
  .pipe(eslint({fix: true}))
  .pipe(eslint.format())
  .pipe(gulpIf(isFixed, gulp.dest(file => file.base)))
  .pipe(eslint.failAfterError());


  gulp.src("es6/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("dist"));

  gulp.src("public/es6/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("public/dist"));

  done();
   
});

再运行 gulp ，会把 es6/test.js 给格式化好，对比一下原文件就知道了，ident 被调整成4个空格了：

'use strict';

const sentences = [
    { subject: 'JavaScript', verb: 'is',  object: 'great' },
    { subject: 'Elephants',  verb: 'are', object: 'large' },
];

function say({ subject, verb, object }) {
    console.log(`${subject} ${verb} ${object}`);
}

for ( let s of sentences) {
    say(s);
}

一、安装gulp和babel#

二、安装eslint#

一、安装gulp和babel

二、安装eslint