3

Javascript的项目与babel和eslint

 2 years ago
source link: https://zhangrr.github.io/posts/20220104-javascript_babel_eslint/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

新建一个项目目录，build01

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

mkdir build01

cd build01
mkdir es6 dist

mkdir public
cd public
mkdir es6 dist

image-20220104160358593

解释一下，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);
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK