Ekim 2018 Güncellemesi
Ön uç geliştirici hakkında hala emin değilseniz, burada mükemmel bir kaynağa hızlı bir şekilde göz atabilirsiniz.
https://github.com/kamranahmedse/developer-roadmap
Haziran 2018 Güncellemesi
Başından beri orada bulunmadıysanız modern JavaScript öğrenmek zordur. Yeni gelen iseniz, daha iyi bir genel bakış için bu mükemmel yazılı kontrol etmeyi unutmayın.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Temmuz 2017 Güncellemesi
Son zamanlarda 2017'de ön uç geliştirmeye nasıl yaklaşılacağı konusunda Grab ekibinden gerçekten kapsamlı bir rehber buldum. Aşağıdaki gibi kontrol edebilirsiniz.
https://github.com/grab/front-end-guide
Ben de orada bir sürü araç var ve her biri bize farklı bir açıdan yarar sağlar çünkü oldukça uzun bir süre için arıyorum. Topluluk, gibi araçlara ayrılmıştır Browserify, Webpack, jspm, Grunt and Gulp. Ayrıca duyabilirsiniz Yeoman or Slush. Bu gerçekten bir sorun değil, sadece ileriye yönelik net bir yol anlamaya çalışan herkes için kafa karıştırıcı.
Her neyse, bir şeyler yapmak istiyorum.
1. Paket Yöneticisi
Paket yöneticileri,: jQuery, Bootstrap, vb. Gibi kütüphaneler olan proje bağımlılıklarının yüklenmesini ve güncellenmesini kolaylaştırır - sitenizde kullanılan ve sizin tarafınızdan yazılmayan her şey.
Tüm kütüphane web sitelerine göz atma, arşivleri indirme ve paketten çıkarma, dosyaları projelere kopyalama - bunların tümü terminaldeki birkaç komutla değiştirilir.
NPMkısaltması: Node JS package manageryazılımınızın bağlı olduğu tüm kitaplıkları yönetmenize yardımcı olur. İhtiyaçlarınızı komut satırında package.jsonçalıştırıp çalıştırdığınız bir dosyada tanımlarsınız npm install... sonra BANG, paketleriniz indirilir ve kullanıma hazır hale gelir. Her iki front-end and back-endkütüphane için de kullanılabilir .
Bower: ön uç paket yönetimi için bu konsept NPM ile aynıdır. Tüm kitaplıklarınız adlı bir dosyada saklanır ve komut satırında bower.jsonçalıştırılır bower install.
Arasındaki en büyük fark Bowerve NPMBower aşağıdaki gibi düz bir bağımlılık ağacı gerektirir iken NPM iç içe bağımlılık ağacını yapmasıdır.
Alıntı Yapmak Bower ve npm arasındaki fark nedir?
NPM
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
kameriye
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Üzerinde bazı güncellemeler var npm 3 Duplication and Deduplication, lütfen daha fazla ayrıntı için dokümanı açın.
Yarn: İçin yeni bir paket yöneticisi JavaScript yayınlanan tarafından Facebookoranla biraz daha avantajları ile son zamanlarda NPM. Ve İplik ile, yine hem kullanabilir NPMve Bowerpaket almaya defteri. Daha önce bir paket yüklediyseniz, yarnkolaylaştıran önbelleğe alınmış bir kopya oluşturur offline package installs.
jspm: SystemJSdinamik ES6modül yükleyicinin üzerine kurulmuş evrensel modül yükleyici için paket yöneticisidir . Kendi kuralları olan tamamen yeni bir paket yöneticisi değil, mevcut paket kaynaklarının üstünde çalışır. Kutudan, birlikte çalıştığı GitHubve npm. Temel Bowerpaketlerin çoğu temel alındığından GitHub, bu paketleri de kullanarak yükleyebiliriz jspm. Daha kolay kurulum için yaygın olarak kullanılan ön uç paketlerinin çoğunu listeleyen bir kayıt defteri vardır.
Farklı arasında Bkz Bowerve jspm:
Paket Yöneticisi: jspm vs Bower
2. Modül Yükleyici / Demetleme
Herhangi bir ölçekte projelerin çoğu, kodları birkaç dosya arasında bölünür. <script>Bununla birlikte, her bir dosyayı ayrı bir etikete dahil edebilirsiniz, ancak <script>yeni bir http bağlantısı kurar ve küçük dosyalar için - bu modülerliğin bir amacıdır - bağlantının ayarlanması, verilerin aktarılmasından çok daha uzun sürebilir. Komut dosyaları indirilirken sayfada hiçbir içerik değiştirilemez.
- İndirme süresi sorunu, bir grup basit modülü tek bir dosyada birleştirip minimize ederek büyük ölçüde çözülebilir.
Örneğin
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Performans, esneklik pahasına gelir. Modüllerinizin birbirine bağımlılığı varsa, bu esneklik eksikliği bir gösterici olabilir.
Örneğin
<head>
<title>Skateboard</title>
<script src=“connectors/axle.js”></script>
<script src=“frames/board.js”></script>
<!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
<script src=“rolling-things/abstract-rolling-thing.js”></script>
<script src=“rolling-things/wheels/skateboard-wheel.js”></script>
<!-- but if skateboard-wheel also depends on ball-bearing -->
<!-- then having this script tag here could cause a problem -->
<script src=“rolling-things/ball-bearing.js”></script>
<!-- connect wheels to axle and axle to frame -->
<script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>
Bilgisayarlar bunu yapabileceğinizden daha iyi yapabilir ve bu yüzden her şeyi otomatik olarak tek bir dosyaya toplamak için bir araç kullanmalısınız.
Sonra duydum yaklaşık RequireJS, Browserify, WebpackveSystemJS
RequireJS: bir JavaScriptdosya ve modül yükleyicisidir. Tarayıcı içi kullanım için optimize edilmiştir, ancak diğer JavaScript ortamlarında da kullanılabilir Node.
Örn: myModule.js
// package/lib is a dependency we require
define(["package/lib"], function (lib) {
// behavior for our module
function foo() {
lib.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
İçinde bağımlılık olarak main.jsiçe aktarabilir myModule.jsve kullanabiliriz.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Ve sonra bizim HTML, ile birlikte başvurabiliriz RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Hakkında daha fazla bilgi edinin CommonJSve AMDkolayca anlaşın.
CommonJS, AMD ve RequireJS arasındaki ilişki?
Browserify: CommonJSbiçimlendirilmiş modüllerin tarayıcıda kullanılmasına izin verecek şekilde ayarlanmıştır . Sonuç olarak, Browserifybir modül paketleyicisi kadar bir modül yükleyici değildir: Browserifytamamen bir oluşturma zamanı aracıdır ve daha sonra istemci tarafına yüklenebilecek bir kod paketi üretir.
Düğümü & npm kurulu olan bir derleme makinesi ile başlayın ve paketi alın:
npm install -g –save-dev browserify
Modüllerinizi CommonJSformatta yazın
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
Ve mutlu olduğunda, paketleme komutunu verin:
browserify entry-point.js -o bundle-name.js
Browserify, giriş noktasının tüm bağımlılıklarını özyineli olarak bulur ve bunları tek bir dosyada birleştirir:
<script src=”bundle-name.js”></script>
Webpack: JavaScriptResimler, CSS ve daha fazlası dahil olmak üzere tüm statik varlıklarınızı tek bir dosyada toplar. Ayrıca, dosyaları farklı yükleyici türleri ile işlemenizi sağlar. Eğer yazabilirsiniz JavaScriptile CommonJSveya AMDmodüller sözdizimi. Yapı sorununa temelde daha entegre ve görüşlü bir şekilde saldırır. Gelen Browserifykullanmak Gulp/Gruntve dönüşümleri ve eklentileri uzun bir liste işin yapılması için. Webpacknormalde ihtiyacınız olmayan Gruntveya Gulphiç kutudan yeterli güç sağlar .
Temel kullanım basit değildir. Web paketini Browserify gibi yükleyin:
npm install -g –save-dev webpack
Ve komutu bir giriş noktası ve bir çıktı dosyası iletin:
webpack ./entry-point.js bundle-name.js
SystemJS:, günümüzde kullanılan popüler biçimlerden herhangi birinde çalışma zamanında modül içe aktarabilen bir modül yükleyicidir ( CommonJS, UMD, AMD, ES6). ES6Modül yükleyici çoklu dolgusunun üzerine inşa edilmiştir ve kullanılan formatı algılayacak ve uygun şekilde işleyebilecek kadar akıllıdır. SystemJSAyrıca ES6 kodunu (ile transpile edebilir Babelya Traceur) ya da gibi diğer dilleri TypeScriptve CoffeeScriptkullanan eklentileri.
Ne olduğunu node moduleve neden tarayıcı içi için iyi uyarlanmadığını bilmek istiyorum .
Daha faydalı makale:
Neden jspmve SystemJS?
Ana hedeflerinden biri ES6modülerlik (gerçekten basit kurulumu yapmak ve internette herhangi bir yerden herhangi bir JavaScript kütüphanesini kullanmaktır Github, npmvs.). Sadece iki şeye ihtiyaç vardır:
- Kütüphaneyi kurmak için tek bir komut
- Kütüphaneyi içe aktarmak ve kullanmak için tek bir kod satırı
Böylece jspm, bunu yapabilirsiniz.
- Kütüphaneyi bir komutla yükleyin:
jspm install jquery
- HTML dosyanızın içinde harici referansa gerek kalmadan tek bir kod satırı ile kütüphaneyi içe aktarın.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Ardından System.config({ ... }), modülünüzü içe aktarmadan önce bunları yapılandırın . Normalde çalıştırıldığında jspm init, config.jsbu amaçla adlandırılmış bir dosya olacaktır .
Koşmak Bu komut dosyalarını hale getirmek için, yüke ihtiyaç system.jsve config.jsHTML sayfası üzerinde. Bundan sonra display.jsdosyayı SystemJSmodül yükleyicisini kullanarak yükleyeceğiz .
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Not: Açısal 2 uyguladığı için npmile de kullanabilirsiniz Webpack. O zamandan beri jspmentegre olmak için geliştirildi SystemJSve mevcut npmkaynağın üstünde çalışıyor , bu yüzden cevabınız size kalmış.
3. Görev koşucusu
Görev koşucuları ve oluşturma araçları öncelikle komut satırı araçlarıdır. Neden bunları kullanmalıyız: Tek kelimeyle: otomasyon . Minyatür, derleme, birim testi, linting gibi tekrarlayan görevleri yerine getirirken daha az iş yapmanız gerekir.
Grunt: Bir yapılandırma dosyası ile kodları önceden işlemek veya geliştirme komut dosyaları oluşturmak için geliştirme ortamınız için otomasyon oluşturabilirsiniz ve karmaşık bir görevi yerine getirmek çok zor görünüyor. Son birkaç yıldır popüler.
İçindeki her görev, Gruntbirbirinden tamamen bağımsız ve sıralı bir şekilde yürütülen farklı eklenti yapılandırmalarından oluşan bir dizi.
grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
Gulp: Otomasyon gibi, Gruntancak yapılandırmalar yerine, JavaScriptbir düğüm uygulaması gibi akışlarla yazabilirsiniz . Bu günleri tercih edin.
Bu Gulpörnek bir görev bildirimidir.
//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//declare the task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
Daha fazlasını görün: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. İskele aletleri
Slush and Yeoman: Onlarla başlangıç projeleri oluşturabilirsiniz. Örneğin, HTML ve SCSS ile bir prototip oluşturmayı, ardından scss, css, img, fontlar gibi manuel olarak bir klasör oluşturmayı planlıyorsunuz. yeomanBasit bir komut dosyası yükleyebilir ve çalıştırabilirsiniz. O zaman burada her şey senin için.
Daha fazlasını burada bulabilirsiniz .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Daha fazlasını görün: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Cevabım sorunun içeriği ile gerçekten eşleşmiyor, ancak Google'da bu bilgileri ararken, her zaman üstte soruyu görüyorum, böylece özet olarak cevaplamaya karar verdim. Umarım faydalı bulmuşsunuzdur.