ES2015

ES2015 (eski adıyla ES6) bir büyük bir adım atıyoruz. Yeni özellikler ve gereken kalıplar için şeker kullanımı. Bu dersler, ok işlevleri ve modüller içerir. Bu bölümde, projeyle ilgili JavaScript web uygulamaları geliştirirken ES2015'ten tam olarak yararlanmak için kullanıyoruz.

Babel ile çeviri

JavaScript motorları çok başarılı olmasına rağmen ES2015'in uygulanmasındaki ilerleme durumu her zaman bir tane neden var. Özelliklerin tamamını kullanmak için Bugün, kodunuzu ES5'e geri dönüştürmeniz gerekiyor. emin olmaktır. Neyse ki Babel gibi araçlar, zahmetsizce sürecektir.

Derleme Sürecinizde Babel'i Kullanma

Babel, ES2015 kullanılarak yazılmış JavaScript'i almanızı sağlar yeniden ES5'e aktarır, böylece şu tarayıcılarla çalışabilir: henüz bu özellikleri desteklemiyor. Derleme işleminize Babel eklemek olduğu için teşekkür ederiz.

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

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Babel'in aktaramadığı tek özellik Modüller'dir. ES6'daki modüller şunları yapmanıza olanak tanır: sınıf oluşturma ve dosyaları içe / dışa aktarma. Modülleri çevirmek için JavaScript'inizi Tarayıcıyı genişlet: dosyaları oluşturup bunu Babelify'a iletir (Browserify'dan alınan çıktıyı işleyebilen bir Babel sürümü).

var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('babelify', function() {
  browserify({ entries: './src.js', debug: true })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/js/'));
});

Birden Çok JavaScript Dosyası

Yukarıdaki örnekte belirli bir dosya tanımlamanız gerekiyor. Bu dosya, dosyaları aramak ve aktarmak için Gulp'te aşağıdaki işlemleri yapar: .es6.js ile biten

var config = {
  src: 'src/scripts',
  dest: 'dist/scripts'
};
var es6FileGlob = '/**/*.es6.js';

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var glob = require('glob');
var path = require('path');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

// Takes an array of bundles to run through browserify and babelify
function transpileES6Modules(browserifyFileEntries) {
  browserifyFileEntries.forEach(function(fileEntry) {
    var browserifyBundle = browserify({
        entries: [fileEntry.srcPath]
      })
      .transform(babelify);

    var finalStream = browserifyBundle.bundle()
      .on('log', plugins.util.log.bind(plugins.util, 'Browserify Log'))
      .on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
      .pipe(source(fileEntry.outputFilename));

    return finalStream.pipe(gulp.dest(fileEntry.dest));
  });
}

// This takes a source path and finds all files ending
// with .es6.js and creates the bundles to run through browserify
// and babelify
function handleES6Scripts(srcPath) {
  var browserifyFileEntries = [];

  var es6Filepaths = glob.sync(srcPath + es6FileGlob);
  es6Filepaths.forEach(function(filepath) {
    var filename = path.basename(filepath);
    var directoryOfFile = path.dirname(filepath);
    var relativeDirectory = path.relative(
      srcPath,
      directoryOfFile);

    // Create an object and add to the browserify bundle array
    browserifyFileEntries.push({
      srcPath: './' + filepath,
      outputFilename: filename,
      dest: path.join(config.dest, relativeDirectory)
    });
  });

  transpileES6Modules(browserifyFileEntries);
}

gulp.task('scripts:es6', ['scripts:lint'], function(cb) {
  handleES6Scripts(config.src);

  cb();
});

Lint ve Stil Kontrolleri

Olası sorunlar ve stil için kodunuzda bağlantı oluştururken birkaç seçenek vardır uygunluk açısından önemlidir.

JSHint ve JSCS

JSHint ve JSCS en yaygın JavaScript stil kontrolünde kullanılan çeşitli araçları inceleyelim.

JSHint, kodunuzdaki olası sorunları vurgular ve olası sorunları kabul edilen kalıpların bir araya gelmesiyle oluşur.

JSCS, kodunuzun stiline bakar. Buna, Yalnızca sekmeler veya boşluklar kullanılıyor ve boşluklar tutarlı yerlere koyuluyor.

ES2015 kodunda JSHint ve JSCS kullanmak için"esnext": true .jshintrc ve .jscsrc dosya

ESLint

ESLint, alternatif bir lint aracı ve stil denetleyicisidir. Bu araç çok fazla buhar alıyor ve JSHint'e kıyasla bazı güzel özelliklere sahip örneğin, JavaScript'inizin hangi kullanımlar için yazıldığı ortamları belirtebilme ve belirli sorunlar için hata / uyarı düzeyini ayarlamaktır.

ESLint, tamamen özelleştirilebilirdir ve bulunduğunuz yerde özel hata analizi kuralları sunar. kapatılıp kapatılmayacağı veya azaltılıp azaltılmayacağı konusunda sürücü koltuğuna yapılandırma dosyaları. Buna ek olarak, React kullanıyorsanız ESLint ayrıca JSX'tir.

Derleme işleminizde ESLint'i ayarlamak da çok zor değildir.

var gulp = require('gulp'),
    eslint = require('gulp-eslint');

gulp.task('lint', function () {
    return gulp.src(['js/**/*.js'])
        // eslint() attaches the lint output to the eslint property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failOnError last.
        .pipe(eslint.failOnError());
});

gulp.task('default', ['lint'], function () {
    // This will only run if the lint task is successful...
});

Babel ekibi babel-estlint, ESLint'i kullanarak geçerli Babel kodlarını analiz etmenize olanak tanıyan bir araçtır. ESLint ise özel ayrıştırıcıları desteklediğinden, Babel tarafından desteklenen söz diziminin bazıları doğrudan ESLint tarafından desteklendiğinden daha fazla ihtiyacınız varsa esnek olma. Bu, sayfanızın parser bölümünü özelleştirerek ayarlanabilir. .eslintrc dosyası:

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

Dan Abramov, Lint'te ESLint ve babel-eslint'in kurulumuyla ilgili harika bir yazı hazırladı. Sanki 2015. Aynı zamanda projeyle ilgili haberlerin SublimeLinter-eslint olarak Sublime Text'te ES2015 analiz analizi desteğine ilişkin iş akışınıza göz atın.

Hangisini kullanmalısınız? Bu eğitimleri deneyin ve size en uygun olan yöntemi tercih edin.

ES2015 Söz Dizimi Vurgulama

Elbette ES2015 kodunuzun söz diziminin doğru şekilde vurgulandığından emin olmanız gerekir. Biz babel-sublime deneyimini yaşayabilirsiniz. Paket Denetimi'nden yüklenmelidir. Kurulum sırasında, tüm dosyalarınız için bu seçeneği varsayılan olarak ayarladığınızdan emin olun. farklı öğeler de kullanabilirsiniz. Bu tabii JS'yi içerecek, ancak React kullanıyorsanız JSX'i de ekleyin.

ES2015'i belgeleme

JavaScript kodumuzu belgelemek için geçmişte yoğun bir şekilde JSDoc'tan yararlanıyorduk. Maalesef ES2015'i destekleme konusunda açık sorunlar (JSDoc 3'te ele alınması nedeniyle) ancak bu sorunun düzeltilmesini beklerken gittikçe artan sayıda alternatif mevcut. ESDoc da bu seçeneklerden biridir. Jonathan Creamer'ın bu konu hakkında yakın zamanda yaptığı bir yazısı da okunmaya değer.

Babel ile Gulp.js dosyaları yazma

Derleme işleminiz için Gulp kullanıyorsanız Gulpfiles artık tarafından desteklenen herhangi bir söz dizimi kullanılarak oluşturulur. Bu işlemi Web Starter Kit ve kurulumu nispeten basittir. Gulp ve Gulp CLI, gulpfile.js cihazınızın adını gulpfile.babel.js olarak değiştirmeniz yeterlidir. Gulp ES2015 gulpfile dosyanızı Babel'i kullanarak otomatik olarak yorumlayıp dönüştürebilirsiniz.

Favori ES2015 Özellikleri

Modüller

Modüller, tek bir dosyadan değerleri, işlevleri ve sınıfları dışa aktarmanın bir yoludur. bunları başka bir dosyaya aktarabilirsiniz.

export function exampleFunction() {
  console.log('I\'m an example. #TrueStory');
}



import { exampleFunction } from './example-function';
import BaseController from './base-controller';

export default class ExampleController extends BaseController {
  constructor() {
    super();

    exampleFunction();
  }

  doSomething() {
    console.log('What should I do? Change the DOM? Print a dancing shark to the console?');
  }
}

Bu sitede başarılı örnek ve açıklamalara Modüller.

Şablon Dizeleri

Şablon dizeleri, bir dizenin bağlantı noktasını değişkenle değiştirmenize olanak tanır.

// Simple string substitution
var name = "Brendan";
console.log('Yo, ${name}!');

// => "Yo, Brendan!"

Şablon dizelerinin iyi yanlarından biri, değiştirmenin bir JavaScript yürütme, yani işlevleri veya satır içi ifadeleri kullanabilirsiniz.

var a = 10;
var b = 10;
console.log('a+b = ${a+b}.');
//=> a+b = 20.

function fn() { return "I am a result. Rarr"; }
console.log('foo ${fn()} bar');
//=> foo I am a result. Rarr bar.

Daha fazla bilgi edinmek için dikkat edin.

Steno Nesne Değişmez Değerleri

Nesne değişmez değerleri sayesinde, (değişken, istediğiniz anahtarla aynı ada sahipse bir nesne oluşturmayı) bir nesne olacaktır.

Anlamı:

function createObject(name, data) {
  return { name: name, data: data };
}

Şuna dönüşür:

function createObject(name, data) {
  return { name, data };
}

Hesaplanan Mülk Adları

ES2015'teki bu özellik, mülk adlarını nesnesini tanımlayın. Mozilla Dokümanlar harika bir bilgi kaynağıdır ve örnek bölümüne bakın.

var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

Yağ Oksi İşlevleri

Yağ ok işlevleri, aşağıdaki durumlarda fonksiyonları kısaca yazmanıza olanak tanır:

button.addEventListener('click', function(event) {
  console.log('The button has received a click', event);
});

Şuna dönüşür:

button.addEventListener('click', (event) => {
  console.log('The button has received a click', event);
});

Daha kısa bir söz dizimine sahip olmanın yanı sıra, yağ ok işlevleri, nesnenin kapsamının kapanış ifadeyle aynı olmasıdır. Yani, fonksiyonunuzda .bind(this) yöntemini çağırmanız gerekmez = this [var] olan bir değişken oluşturun.

İnternette buna benzer pek çok MDN olarak kullanılabilir.

Addy'nin ES6 Araç Deposu

Addy, ES2015 araçlarının bir listesini tutmakla meşguldü ve yukarıdaki araçlar yoksa Gulp yerine Grunt kullanıyor olabilirsiniz, bu durumda da bir yanıt alırsınız.

https://github.com/addyosmani/es6-tools

Yukarıda, doğrulama sürecinde size yardımcı olabilecek ek Babel araçlarına gibi pek çok farklı işlevi vardır.

Okunacak Kitaplar

Hakkında daha fazla bilgi edinebileceğiniz iki kitabı ücretsiz olarak çevrimiçi edinebilirsiniz. ES2015. ECMAScript 6'yı anlama Yazan: Nicholas C. Zakas ve Exploring ES6 tarafından yazılan Dr. Axel Rauschmayer.

Babel Kulesi

Komut satırınızda ES2015 özelliklerini öğrenmek isterseniz tower-of-babel ilginizi çekebilecek alıştırmalar var. Hepsini de uygulama Babel.

İlginizi çekebilecek diğer kaynaklar: