Bermula dengan BROWSERIFY

pelaksanaan JavaScript telah semakin banyak dan lebih kompleks sebagai binatang yang indah yang kita panggil web berkembang setiap tahun. Ramai di antara kita kini bekerja dengan modul JavaScript - komponen berfungsi secara bebas yang bersatu untuk bekerja sebagai keseluruhan yang kohesif, namun dengan senang hati dapat mempunyai komponen yang diganti tanpa menyebabkan Armageddon. Ramai di antara kita telah menggunakan corak modul AMD dan memerlukan untuk mencapai ini dengan kemas.

Tahun lepas, Browserify memukul tempat kejadian dan membawa banyak keseronokan. Apabila habuk mula menetap, saya ingin menulis gambaran keseluruhan mengenai apa yang dilayari, bagaimana ia berfungsi, dan beberapa pilihan untuk menambahkannya ke dalam aliran kerja anda.

Takeaways Key

BROWSERIFY membolehkan penggunaan modul gaya Node.js secara langsung dalam penyemak imbas dengan bergantung kepada kebergantungan ke dalam fail JavaScript tunggal.

• Untuk mula menggunakan Browserify, anda memerlukan node.js, npm (dipasang dengan node.js secara lalai), dan melayari sendiri, yang boleh dipasang secara global menggunakan `NPM Install -G Browserify`.
• BROWSERIFY Memudahkan termasuk perpustakaan luaran dalam projek anda dengan menggunakan `memerlukan ()` pernyataan, serupa dengan node.js, dan juga boleh menghasilkan peta sumber untuk debugging yang lebih mudah. ​​
• Anda boleh mengautomasikan proses penyebaran menggunakan skrip NPM atau pelari tugas seperti Gulp dan Grunt, meningkatkan kecekapan aliran kerja dan mengurangkan usaha penggabungan manual.
Menguruskan kebergantungan dalam projek BROWSERIFY diselaraskan dengan fail `pakej.json`, yang menentukan butiran projek dan pakej NPM yang diperlukan, yang membolehkan orang lain menubuhkan projek dengan` NPM Install`.
BROWSERIFY serasi dengan modul ES6 melalui transpilasi menggunakan Babel, dan menyokong debugging dengan peta sumber untuk mengesan kembali ke fail sumber asal untuk penjejakan ralat yang lebih mudah.
Apa itu Browserify?
BROWSERIFY membolehkan kami menggunakan modul gaya Node.js dalam penyemak imbas. Kami mentakrifkan kebergantungan dan kemudian melayari kumpulan semuanya ke dalam fail JavaScript yang kemas dan kemas. Anda memasukkan fail JavaScript yang diperlukan dengan menggunakan penyataan yang memerlukan ('./ yourfancyjsfile.js') dan juga boleh mengimport modul yang tersedia secara terbuka dari npm. Ia juga agak mudah untuk melayari untuk menjana peta sumber untuk anda supaya anda boleh debug setiap fail JS secara individu, walaupun pada hakikatnya ia semua bergabung menjadi satu.

mengapa modul nod import?

Modul mengimport adalah berkat - dan bukannya melawat pelbagai laman web untuk memuat turun perpustakaan untuk JavaScript anda, hanya memasukkan mereka menggunakan pernyataan yang memerlukan (), memastikan bahawa modul telah dipasang dan anda baik untuk pergi. Perpustakaan JavaScript yang biasa digunakan seperti jQuery, garis bawah, tulang belakang dan juga sudut (sebagai pengedaran tidak rasmi) semuanya tersedia untuk bekerja dengan. Jika anda bekerja di tapak yang sudah menjalankan nod, anda memudahkan perkara lebih jauh dengan satu cara yang sama untuk menyusun semua JS anda. Saya sangat suka konsep itu.

Apa yang anda perlukan

Untuk memulakan dengan Browserify, minimum yang anda perlukan ialah:

• node.js
• npm - ini dipasang dengan nod secara lalai.
• BROWSERIFY - Saya akan menerangkan cara memasang yang satu ini.
• Satu pek modul JavaScript yang anda sudah bersedia untuk menjinakkan!

Bermula

Untuk bermula, anda memerlukan nod dan NPM yang dipasang pada komputer anda. Kepala ke pautan di atas jika anda mencari panduan untuk memasangnya. Jika anda benar -benar terjebak, cubalah arahan ini untuk memasang Node.js melalui Pengurus Pakej. Anda tidak perlu melakukan apa -apa kerja nod untuk menggunakan Browserify. Kami memasang nod semata -mata kerana NPM melepaskannya. Sebaik sahaja anda mempunyai NPM, anda boleh memasang Browserify menggunakan arahan berikut:

npm install -g browserify

Apa yang kami lakukan di sini adalah menggunakan NPM untuk memasang Browserify secara global pada mesin anda (The -G memberitahu NPM untuk memasang modul secara global).

Jika anda mendapat ralat yang bermula dengan yang berikut:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

maka anda mempunyai isu kebenaran. Anda boleh sudo arahan, tetapi saya cadangkan menyemak jawatan ini sebaliknya.

Membuat Fail Browserify pertama anda

Mari mulakan dengan membuat fail JavaScript yang dilayari yang mengimport modul yang sangat popular, garis bawah. Kami akan menggunakan garis bawah untuk menjejaki Superman. Saya telah memanggil fail JS saya main.js, dan telah meletakkannya dalam folder JS dalam projek saya.

kita mulakan dengan memberikan pembolehubah _ untuk menggariskan menggunakan penyataan Browserify yang memerlukan () dalam JavaScript kami:

<span>var _ = require('underscore');</span>

Seterusnya, kami akan menggunakan fungsi masing -masing () dan mencari () dari garis bawah. Kami akan mencari melalui dua array nama dan menjalankan konsol.log untuk mengatakan sama ada ia melihat Superman atau tidak. Perkara yang sangat maju Lex Luthor hanya boleh bermimpi. Kod JavaScript terakhir kami akan kelihatan seperti ini:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Kami ingin memastikan bahawa BROWSERIFY dapat mencari modul NPM apabila ia cuba menambahkannya ke projek kami. Asas -asas yang terdedah untuk berbuat demikian melibatkan pembukaan terminal anda, menavigasi ke folder yang memegang projek JavaScript anda, dan kemudian menjalankan arahan ini untuk memasang garis bawah dalam folder itu:

npm install underscore

Bagi mereka yang tidak dikenali dengan cara kerja nod dan NPM, ini mewujudkan folder yang dipanggil node_modules dalam projek anda yang memegang kod untuk modul garis bawah anda. Perintah itu mengambil versi terkini underscore dari repositori NPM di https://registry.npmjs.org/underscore. Dengan modul itu dalam folder node_modules kami, Browserify kini dapat mencarinya dan menggunakannya.

berjalan melayari buat kali pertama

Apabila kita menjalankan Browserify, ia akan mahu membina fail JavaScript baru dengan semua modul yang dilampirkan. Dalam kes ini, ia akan membina fail JavaScript dengan garis bawah di dalamnya. Kami perlu membuat keputusan mengenai nama untuk fail baru ini, saya telah pergi dengan findem.js. Saya menjalankan arahan ini dari folder root projek saya:

npm install -g browserify

Perintah ini membaca fail main.js anda dan mengeluarkannya ke dalam fail findem.js yang ditakrifkan oleh pilihan -O. Saya telah memasukkan pilihan -d supaya ia akan menghasilkan peta sumber untuk kita juga, dengan cara ini kita boleh debug main.js dan menggariskan bersih sebagai fail berasingan.

menggunakan output BROWSERIFY

dari sana, ia semudah termasuk fail pada halaman anda seperti mana -mana fail JS lain:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

mengimport fail JavaScript anda sendiri

Tidak mungkin semua aplikasi anda akan datang dari modul nod. Untuk memasukkan JavaScript anda sendiri, anda boleh menggunakan fungsi keperluan yang sama (). Barisan JavaScript berikut akan mengimport fail JS yang dipanggil your_module.js ke dalam pembolehubah yang hebat:

<span>var _ = require('underscore');</span>

Untuk mengimport JavaScript kami seperti ini, kami hanya perlu menyusun JavaScript kami sebagai modul. Untuk berbuat demikian, kita mesti menentukan modul.exports. Salah satu cara untuk melakukan ini ditunjukkan di bawah.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

nota sampingan!

Jika anda mempunyai sekumpulan perpustakaan JavaScript yang tidak berada di npm dan anda sedang mencari cara yang lebih mudah untuk mendapatkan semua ini menjadi pelayar, anda boleh menggunakan modul NPM Browserify-Shim untuk menukar fail ini untuk anda . Kami tidak akan menggunakannya dalam artikel ini tetapi beberapa devs mungkin berminat untuk memberikannya.

Contoh kami dengan modul

Untuk memberikan contoh mudah bagaimana ini berfungsi, kami akan mengambil tatasusunan dari contoh carian superhero sebelumnya dan menggantikannya dengan modul JS yang berasingan yang mengembalikan pelbagai nama. Modul kelihatan seperti:

npm install underscore

Seterusnya, kami akan mengimport modul itu ke dalam kod kami menggunakan nama = memerlukan ('./ names.js'):

browserify js/main.js -o js/findem.js -d

Nama kami Variabel Rujukan fungsi yang dieksport dari modul kami. Oleh itu, kami menggunakan pemboleh ubah nama di atas sebagai fungsi dengan kurungan apabila kami lulus dalam pelbagai nama ke fungsi FindSuperman () kami.

Jalankan perintah BROWSERIFY dari baris arahan anda sekali lagi untuk menyusunnya, membukanya dalam penyemak imbas anda, dan ia harus berjalan seperti yang diharapkan, mencari melalui setiap nilai dalam array dan pembalakan sama ada ia melihat Superman atau tidak:

lulus dalam pembolehubah dan perkongsian modul di seluruh aplikasi kami

Untuk menambah sedikit lebih kerumitan kepada aplikasi pemburuan Superman yang agak mudah ini, mari kita menjadikan fungsi kami FindSuperman () menjadi modul. Dengan cara itu, kita secara teorinya dapat mencari Superman di pelbagai bahagian JavaScript kami dan kami sentiasa boleh menggantikan modul Hunter Superman kami dengan yang lebih berkesan pada masa akan datang dengan mudah. ​​

kita boleh lulus dalam pembolehubah ke modul kami dan menggunakannya dalam fungsi modul.exports kami, jadi kami akan membuat modul dalam fail yang dipanggil FindSuperman.js yang mengharapkan diberikan pelbagai nama:

npm install -g browserify

Saya telah menambah nilai pulangan untuk fungsi FindSuperman () kami. Jika ia mendapati Superman, ia akan kembali benar. Jika tidak, ia akan kembali palsu. Terserah kod yang menggunakan modul ini untuk menentukan apa yang digunakan untuk nilai sebenar/palsu ini. Walau bagaimanapun, ada satu perkara yang kita hilang dalam modul di atas. Kami menggunakan garis bawah dalam fungsi kami, tetapi tidak mengisytiharkannya. Kita boleh mengisytiharkannya dalam modul itu sendiri juga di bahagian atas seperti:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Apabila menggunakan Browserify, ia akan melihat melalui semua fail JS anda yang diimport dan hanya akan mengimport setiap modul yang disebut sekali. Oleh itu, kami memerlukan garis bawah dalam fail JS utama kami dan kami memerlukannya di FindSuperman.js tetapi apabila melayari pakej semuanya, ia hanya memasukkannya ke dalam fail JS terakhir kami sekali. Cukup kemas betul?

aplikasi JavaScript sebenar kami kini akan menggunakan modul baru kami dengan nilai True True/False yang baru kembali. Untuk tujuan demo, kami hanya akan berpegang pada dokumen yang mudah. ​​Menulis untuk mengatakan sama ada ia mendapati Superman dari nama kami:

<span>var _ = require('underscore');</span>

Kami tidak perlu mengimport garis bawah dalam fail JS utama kami lagi, jadi anda boleh mengeluarkannya tanpa sebarang drama. Ia masih akan diimport pada akhirnya melalui kemasukannya dalam fail findSuperman.js.

Menguruskan kebergantungan NPM Browserify dengan Package.json

Katakanlah anda mempunyai kawan yang berminat yang ingin menggunakan kod anda. Ia akan menjadi agak sukar untuk mengharapkan mereka tahu bahawa mereka perlu memasang modul garis bawah NPM terlebih dahulu. Penyelesaian untuk ini adalah membuat fail yang dipanggil Package.json dalam akar projek anda. Fail ini memberikan nama anda nama (pastikan tiada ruang dalam nama di sini), penerangan, pengarang, versi dan yang paling penting dalam kes kami - senarai kebergantungan NPM. Bagi mereka yang telah dibangunkan dengan Node, kami menggunakan perkara yang sama di sini:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Senarai kebergantungan kini terhad kepada "underscore" tunggal kami: "1.6.x", di mana bahagian pertama ketergantungan adalah nama dan bahagian kedua adalah versi. terkini atau * akan mengambil versi terkini NPM. Sebagai alternatif, anda boleh memasukkan nombor seperti 1.6 (untuk versi 1.6) dan 1.6.x (untuk versi 1.6.0 sehingga tetapi tidak termasuk 1.7).

Kami juga boleh memasukkan BROWSERIFY dirinya sebagai kebergantungan, namun ia bukan kebergantungan untuk projek yang dijalankan - mana -mana pengguna ke aplikasi kami dapat mencari Superman tanpa perlu menjalankan Browserify. Ia adalah salah satu daripada devdependency kami - modul yang diperlukan untuk pemaju membuat kemas kini ke aplikasi ini.

Sekarang kami mempunyai fail Package.json, kami tidak perlu mendapatkan rakan kami untuk menjalankan NPM memasang garis bawah. Mereka hanya boleh menjalankan pemasangan NPM dan semua kebergantungan yang diperlukan akan dipasang ke dalam folder Node_modules mereka.

mengautomasikan proses penyebaran

Running Browserify dalam baris arahan setiap kali anda menukar fail yang menjengkelkan dan tidak sama sekali mudah. Nasib baik terdapat beberapa pilihan yang tersedia untuk mengautomasikan menjalankan Browserify.

npm

npm sendiri dapat menjalankan skrip baris arahan seperti yang anda telah menaip secara manual. Untuk berbuat demikian, letakkan seksyen skrip ke dalam pakej.json anda seperti:

untuk menjalankannya, anda boleh menaip yang berikut dalam baris arahan anda:

npm install -g browserify

Tetapi itu tidak cukup mudah. Kami masih perlu menjalankan arahan itu secara manual setiap kali. Itu menjengkelkan. Jadi pilihan yang lebih baik ialah menggunakan modul NPM yang dipanggil Watchify. Watchify adalah mudah, ia mudah dan ia adalah penyelamat masa yang besar. Ia akan menonton perubahan pada JS anda dan secara automatik menjalankan Browserify.

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Untuk mendapatkan ini ke dalam pakej.json kami, kami akan menambahkannya kepada kebencian kami dan memasukkan skrip baru untuk menonton JS kami (meninggalkan binaan-JS di sana untuk masa-masa yang kami mahu membina JS kami tanpa perlu menukar Fail).

untuk menjalankan ini, taipkan perintah berikut.

<span>var _ = require('underscore');</span>

ia akan berjalan dan berfungsi sihirnya. Ia tidak mengatakan banyak walaupun untuk memberitahu anda apa yang sedang berlaku, yang boleh mengelirukan. Jika anda lebih suka memberi anda butiran mengenai apa yang dilakukannya, tambah -v ke perintah Watchify anda seperti:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

yang akan memberi anda maklum balas seperti ini setiap kali ia berjalan:

npm install underscore

Menjana peta sumber dalam npm

browserify js/main.js -o js/findem.js -d

untuk menjana peta sumber menggunakan npm, tambah -d selepas perintah Browserify atau Watchify anda:

mempunyai kedua -dua -d untuk debugging dan -v untuk output verbose dalam Watchify anda boleh menggabungkan mereka seperti SO:

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

grunt

greatestModuleEver <span>= require('./your_module.js');</span>

Banyak orang (termasuk saya sendiri) telah menggunakan Grunt untuk sementara waktu sekarang dan cukup digunakan untuknya. Nasib baik, untuk macam -macam itu, BROWSERIFY bermain dengan baik dengan Grunt membina juga!

Kami perlu menukar fail Package.json kami untuk menggunakan Grunt. Kami tidak akan menggunakan bahagian skrip lagi, dan sebaliknya akan bergantung pada Grunt untuk itu. Sebaliknya kami akan menambah beberapa kebencian baru:

Kami telah menambah kepada kebergantungan kami:

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

Grunt - Untuk memastikan kami mendapat Grunt dipasang untuk projek itu.

Grunt-Browserify-Modul yang akan membolehkan anda menjalankan Browserify Inside Grunt.
Grunt-Contrib-Watch-Modul yang akan menonton fail kami dan menjalankan BROWSERIFY pada bila-bila masa mereka berubah.
• Kami kemudian membuat fail yang dipanggil gruntfile.js dalam akar projek kami. Di dalam fail grunt ini kita akan mempunyai yang berikut:

Kami mulakan dalam fail grunt kami dengan memuatkan modul NPM yang kami perlukan dalam fail pakej.json kami:

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

Kami mendaftarkan satu -satunya kumpulan tugas kami yang ingin kami jalankan sebagai tugas lalai kami (Browserify and Watch):

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

kami menyediakan objek initconfig kami (semua fail grunt cari ini):

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

Dalam itu, kami menunjukkan di mana fail pakej.json kami adalah:

npm install -g browserify

Tetapan BROWSERIFY kami seterusnya dan pada dasarnya mereka menetapkan di mana fail JS sumber kami adalah dengan kod pelebaran kami dan fail yang kami ingin dibina untuk:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Kami kemudian menyediakan tugas menonton untuk mengemukakan tugas pelebaran kami apabila ada perubahan dalam folder JS:

<span>var _ = require('underscore');</span>

Kerana devdependency baru kami (kami tidak telah mencengkam dipasang dalam projek kami, dan tidak ada modul tersebut), kami perlu memasang NPM terlebih dahulu. Sebaik sahaja anda telah membenarkannya menjalankan dan memasang sebarang modul, anda boleh menjalankan GruntCommand yang sangat mudah untuk mendapatkannya untuk mula menonton projek anda.

Menjana peta sumber dalam grunt

Dengan versi 2.0.1 Grunt-Browserify, cara peta sumber perlu ditakrifkan berubah menyebabkan banyak panduan dalam talian menjadi salah! Cara yang betul untuk mendapatkan keluhan dan melayari untuk menjana peta sumber untuk anda adalah untuk menambah debug: benar dalam bundleoptions dalam pilihan seperti SO:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Bahawa pilihan mencari rumit yang ditetapkan adalah bertujuan untuk membolehkan kemasukan pilihan BROWSERIFY masa depan dengan cara yang baik dan mudah. ​​

Gulp

Gulp adalah kekasih tabloid Browserify. Artikel di sekitar pasangan web yang kedua -duanya agak kerap, melayari dan menelan - proses membina JavaScript canggih yang dibuat di syurga. Saya tidak akan mengatakan peminat BROWSERIFY perlu menggunakan Gulp, kebanyakannya adalah keutamaan peribadi antara sintaks yang berbeza. Anda boleh (seperti yang anda lihat di atas) dengan senang hati menggunakan NPM atau Grunt untuk membina fail Browserify anda. Saya secara peribadi peminat proses membina NPM yang bersih dan sederhana untuk projek yang lebih kecil.

Untuk melakukan perkara di atas di Gulp, kita akan mulakan dengan memasang Gulp secara global:

npm install underscore

kami akan mengemas kini fail pakej.json kami untuk memasukkan beberapa kebiasaan baru yang kami perlukan:

browserify js/main.js -o js/findem.js -d

kami telah menambah perkara berikut:

• Watchify - Kami menggunakan ini di atas dalam contoh NPM juga. Modul yang sama.
• Gulp - Modul yang agak penting untuk memberi kita semua kebaikan Gulp!
• Vinyl-Source-Stream-Ini adalah modul yang akan mengambil input dan mengembalikan fail untuk kami meletakkan di suatu tempat.

BROWSERIFY mempunyai API streaming untuk outputnya yang boleh kita gunakan secara langsung di Gulp. Sekumpulan panduan akan mencadangkan menggunakan plugin Gulp-Browserify, namun BROWSERIFY tidak mengesyorkan ini dan lebih suka kami menggunakan output API Streaming Browserify. Kami menggunakan aliran vinil-sumber untuk mengambil output penyebaran ini dan meletakkannya ke dalam fail untuk kami output di suatu tempat.

Kami kemudian membuat fail yang dipanggil gulpfile.js dalam akar projek kami. Di sinilah semua fungsi Teluk akan pergi:

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

kita mulakan dengan mengimport dalam modul NPM kami yang jelas penjelasan diri. Kami kemudian menetapkan tiga pembolehubah untuk membina kami:

• SourceFile - lokasi dan nama fail fail dilayari kami (dalam kes ini js/main.js)
• destfolder - lokasi folder kami mengeluarkan fail akhir ke
• Destfile - nama fail yang kami mahukan fail akhir kami mempunyai

Saya akan menerangkan kod dengan sedikit lebih terperinci di bawah.

Bagaimana BROWSERIFY dan GULP Bekerja Bersama

Tugas pertama kami adalah pelebaran kami yang kami tentukan seperti:

npm install -g browserify

pertama kali melewati fail main.js kami ke dalam modul NPM Browserify:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Kami kemudian menggunakan API Streaming Browserify untuk mengembalikan aliran yang boleh dibaca dengan kandungan JavaScript kami:

<span>var _ = require('underscore');</span>

dari sana, kami paip ke dalam fail dengan nama filename findem.js dan kemudian paip yang melalui ke tongp untuk dimasukkan ke dalam folder JS kami.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

kami pada dasarnya mengambil input kami melalui pelbagai peringkat yang berlaku ke dalam projek akhir kami yang sepatutnya menjadi fail JavaScript baru yang berkilat!

Menggabungkan Watchify and Gulp

Seperti yang dipelajari sebelum ini, ia agak menjengkelkan untuk menggunakan BROWSERIFY secara langsung kerana lebih mudah untuk memilikinya secara automatik apabila anda mengemas kini fail. Untuk melakukan ini, kami menggunakan modul NPM Watchify sekali lagi.

Kami mulakan dengan menubuhkan tugas yang dipanggil Watch (anda boleh memanggilnya Watchify jika anda mahu ... ia benar -benar terpulang kepada anda di sini):

npm install underscore

kami menetapkan modul Watchify kepada pembolehubah Bundler kerana kami akan menggunakannya dua kali:

browserify js/main.js -o js/findem.js -d

Kami kemudian menambah pengendali acara yang menjalankan fungsi yang dipanggil Rebundle () bila -bila masa acara kemas kini dipanggil. Pada asasnya, apabila Watchify melihat perubahan fail, ia akan menjalankan rebundle ():

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

Jadi apa itu rebundle ()? Ia cukup tepat apa yang dilakukan oleh tugas pelebaran kami di atas:

greatestModuleEver <span>= require('./your_module.js');</span>

Ia mungkin untuk menggabungkan kedua -dua Browserify dan mengawasi bersama -sama dalam beberapa pengoptimuman JavaScript yang berminat tetapi saya memutuskan untuk meninggalkan mereka secara berasingan dalam artikel ini untuk menjaga perkara yang mudah. Untuk contoh yang mengagumkan dan lebih kompleks, lihat fail gulp starter Dan Tello.

Untuk menyelesaikan gulpfile.js kami, kami menentukan tugas lalai kami yang berfungsi dengan cara yang sama seperti tugas lalai dalam Grunt.

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

Untuk menjalankan kod Gulp di atas, anda mempunyai tiga pilihan. Cara paling mudah adalah menjalankan tugas lalai yang anda buat, yang hanya memerlukan satu perkataan pada baris arahan:

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

yang akan menjalankan tugas melayari sekali dan tugas menonton akan mula menonton fail untuk sebarang perubahan.

anda juga boleh menjalankan tugas pelayar anda secara khusus:

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

atau tugas jam tangan anda:

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

Menjana peta sumber menggunakan Gulp dan Browserify

untuk menghasilkan peta sumber untuk JavaScript anda, termasuk {debug: true} dalam kedua -dua fungsi bundle ().

Tugas BROWSERIFY kami akan kelihatan seperti:

<span>var _ = require('underscore');
</span>
module<span>.exports = function (values) {
</span>  <span>...</span>

fungsi rebundle () dalam tugas menonton kami akan kelihatan seperti:

npm install -g browserify

Kesimpulan

Ia masih cukup awal untuk melayari dan ia pasti akan berubah dan matang seiring dengan berlalunya masa. Dalam keadaan semasa, ia sudah menjadi alat yang sangat berguna untuk menstrukturkan javascript modular anda dan sangat cemerlang bagi mereka yang menggunakan nod pada backend mereka. Kod menjadi lebih bersih untuk pemaju nod apabila menggunakan modul NPM di bahagian depan dan belakang projek. Sekiranya anda tidak memberikan BROWSERIFY satu pukulan, cubalah dalam projek JavaScript seterusnya dan lihat jika ia menggegarkan dunia anda.

Sumber lain

Terdapat satu tan sumber pelayar lain di luar sana. Beberapa bit dan kepingan yang berguna yang mungkin ingin anda periksa:

• Buku Panduan BROWSERIFY - Buku Panduan James Halliday yang sangat berharga untuk memulakan dengan Browserify. Pasti bernilai dibaca!
• Gulp Browserify: The Everything Post by Dan Tello - Artikel yang benar -benar menyeluruh menunjukkan penggunaan yang lebih maju.
• Dan seperti yang mengerang dan memerlukannya, itu semua mengenai Gulp dan Browserify sekarang - Martin Genev bercakap tentang penukarannya yang tiba -tiba untuk melayari dan menelan dengan contoh.
Pengenalan kepada Gulp.js - Maklumat lanjut mengenai cara menggunakan Gulp oleh Craig Buckler.

Soalan Lazim (Soalan Lazim) Mengenai Bermula Dengan BROWSERIFY

Apakah tujuan utama BROWSERIFY?

BROWSERIFY adalah alat pembangunan yang membolehkan pemaju menulis modul gaya Node.js yang disusun untuk digunakan dalam penyemak imbas. Dengan Browserify, anda boleh memerlukan ('modul') dalam penyemak imbas dengan menggabungkan semua kebergantungan anda. Alat ini amat berguna kerana ia membolehkan anda menggunakan kebanyakan pakej NPM secara langsung dalam penyemak imbas, yang dapat mempercepatkan proses pembangunan. Tidak seperti bundlers modul lain, Browserify direka khusus untuk membolehkan pemaju menulis modul gaya Node.js untuk penyemak imbas. Ia melakukan ini dengan menganalisis secara rekursif semua keperluan () panggilan dalam aplikasi anda untuk membina satu bundle yang anda boleh berkhidmat sehingga penyemak imbas dalam satu tag skrip. Browserify juga mempunyai ekosistem plugin yang kaya, yang membolehkan anda menyesuaikan binaan anda ke tahap yang besar. Pengurus pakej). Perintah untuk ini adalah 'NPM Install -g Browserify'. Setelah dipasang, anda boleh menggunakannya dari baris arahan untuk membungkus fail JavaScript anda. Format Modul CommonJS. Kemudian, anda boleh menggunakan BROWSERIFY dari baris arahan untuk membungkus fail JavaScript utama anda bersama -sama dengan semua kebergantungannya ke dalam satu fail. Fail yang dibundel ini kemudiannya boleh dimasukkan ke dalam fail HTML anda menggunakan tag skrip.

Bolehkah saya menggunakan modul ES6 dengan BROWSERIFY? . Anda boleh melakukan ini dengan memasang Babel dan Babelify Transform, dan kemudian menggunakannya dalam perintah Browserify anda. Gunakan kebanyakan pakej NPM secara langsung dalam penyemak imbas. Untuk melakukan ini, anda perlu memasang pakej menggunakan npm. Kemudian, anda boleh memerlukan pakej dalam fail JavaScript anda, dan Browserify akan memastikan bahawa ia dimasukkan ke dalam bundle anda. mengubah kod anda. Sebagai contoh, anda boleh menggunakan Babelify Transform untuk menyusun kod ES6 anda ke dalam kod ES5. Transformasi boleh digunakan secara global atau ke fail tertentu, dan anda boleh menggunakan pelbagai transformasi dalam projek anda. Peta, yang boleh membantu anda debug kod anda. Untuk menjana peta sumber, anda boleh menggunakan pilihan '-debug' dalam perintah Browserify anda. Ini termasuk data pemetaan sumber dalam bundle anda, yang kemudiannya boleh digunakan oleh alat pemaju penyemak imbas untuk membantu anda debug kod anda. 🎜> Ya, anda boleh menggunakan Browserify dengan pelari tugas seperti Gulp atau Grunt. Kedua -dua Gulp dan Grunt mempunyai plugin yang boleh digunakan untuk mengintegrasikan Browserify ke dalam proses binaan anda. Ini dapat membantu mengautomasikan proses penggabungan fail JavaScript anda.

Bagaimana saya boleh mengoptimumkan bundle saya untuk pengeluaran? Satu kaedah yang biasa adalah untuk meminimumkan bundle anda menggunakan alat seperti uglifyjs. Anda juga boleh menggunakan plugin 'Tinyify', yang merupakan plugin BROWSERIFY yang menggunakan pelbagai pengoptimuman untuk bundle anda untuk menjadikannya sekecil mungkin.

Atas ialah kandungan terperinci Bermula dengan BROWSERIFY. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!