Pertanyaan JavaScript membutuhkan () di sisi klien


Apakah mungkin untuk digunakan require() (atau yang serupa) di sisi klien?

Contoh

var myClass = require('./js/myclass.js');

75
2018-03-02 13:59


asal


Jawaban:


Anda harus melihat ke dalam require.js atau head.js untuk ini.


40
2018-03-02 14:01



Saya telah menggunakan browserify untuk itu. Ini juga memungkinkan saya mengintegrasikan modul Node.js ke dalam kode sisi klien saya.

Saya membuat blog tentang ini di sini: Tambahkan node.js / CommonJS style require () ke JavaScript sisi klien dengan browserify


20
2017-08-05 14:19



Saya bertanya pada diri saya sendiri pertanyaan yang sama. Ketika saya memeriksanya, saya menemukan pilihan yang luar biasa.

Untungnya saya menemukan spreadsheet yang sangat baik ini yang membantu Anda memilih pemuat terbaik berdasarkan kebutuhan Anda:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ


11
2017-08-05 15:11



Jika Anda ingin memiliki gaya Node.js require Anda dapat menggunakan sesuatu seperti ini:

var require = (function () {
    var cache = {};
    function loadScript(url) {
        var xhr = new XMLHttpRequest(),
            fnBody;
        xhr.open('get', url, false);
        xhr.send();
        if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
            fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
            cache[url] = (new Function(fnBody)).call({});
        }
    }
    function resolve(module) {
        //TODO resolve urls
        return module;
    }
    function require(module) {
        var url = resolve(module);
        if (!Object.prototype.hasOwnProperty.call(cache, url)) {
            loadScript(url);
        }
        return cache[url];
    }
    require.cache = cache;
    require.resolve = resolve;
    return require;
}());

Hati-hati: kode ini berfungsi tetapi tidak lengkap (terutama url resolving) dan tidak mengimplementasikan semua fitur Node.js (saya hanya menyatukannya tadi malam). ANDA TIDAK BOLEH MENGGUNAKAN KODE INI dalam aplikasi nyata tetapi memberi Anda titik awal. Saya mengujinya dengan modul sederhana ini dan berhasil:

function hello() {
    console.log('Hello world!');
}

exports.hello = hello;

11
2017-12-16 15:32



Melihat requirejs proyek.


9
2018-03-02 14:02



Saya telah menemukan bahwa secara umum dianjurkan untuk skrip preprocess pada waktu kompilasi dan membundelnya dalam satu (atau sangat sedikit) paket dengan require Ditulis ulang ke beberapa "shim yang ringan" juga pada waktu kompilasi.

Saya telah Googled mengikuti alat "baru" yang seharusnya dapat melakukannya

Dan yang sudah disebutkan browserify juga harus cukup pas - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

Apa sajakah sistem modul itu?


7
2018-04-23 05:57



Anda dapat membuat elemen ke DOM, yang memuat item.

Seperti itu:

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file

3
2018-03-02 14:02



Cukup gunakan Browserify, apa yang seperti kompilator yang memproses file Anda sebelum masuk ke dalam produksi dan paket file dalam bundel.

Pikirkan Anda memiliki file main.js yang membutuhkan file proyek Anda, ketika Anda menjalankan browserify di dalamnya, itu hanya memproses semua dan membuat bundel dengan semua file Anda, memungkinkan penggunaan require panggilan serentak di browser tanpa permintaan HTTP dan dengan overhead yang sangat sedikit untuk kinerja dan untuk ukuran bundel, misalnya.

Lihat tautan untuk info lebih lanjut: http://browserify.org/


3
2018-02-01 17:33



Beberapa jawaban sudah - tetapi saya ingin mengarahkan Anda ke YUI3 dan pemuatan modul on-demand-nya. Ia berfungsi baik pada server (node.js) dan klien, juga - Saya memiliki situs web demo menggunakan kode JS yang sama persis yang berjalan pada klien atau server untuk membuat halaman, tetapi itu topik yang lain.

YUI3: http://developer.yahoo.com/yui/3/

Video: http://developer.yahoo.com/yui/theater/

Contoh:

(prasyarat: fungsi YUI3 dasar dalam 7k yui.js telah dimuat)

YUI({
    //configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
    //sandboxed application code
    //...

    //If you already have a "Y" instance you can use that instead
    //of creating a new (sandbox) Y:
    //  Y.use('moduleX','moduleY', function (Y) {
    //  });
    //difference to YUI().use(): uses the existing "Y"-sandbox
}

Kode ini memuat modul YUI3 "node" dan "io", dan modul "own-app-module1", dan kemudian fungsi callback dijalankan. Kotak pasir baru "Y" dengan semua fungsi YUI3 dan fungsi-aplikasi-1 sendiri dibuat. Tidak ada yang muncul di ruang nama global. Pemuatan modul (.js file) ditangani oleh loader YUI3. Ia juga menggunakan konfigurasi (opsional, tidak ditampilkan di sini) untuk memilih versi -debug atau -min (ified) dari modul untuk dimuat.


2
2018-03-02 14:10



Berikut ini solusi yang mengambil pendekatan yang sangat berbeda: mengemas semua modul ke dalam objek JSON dan memerlukan modul dengan membaca dan mengeksekusi konten file tanpa permintaan tambahan.

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / membutuhkan tergantung pada paket JSON yang tersedia saat runtime. Itu require fungsi dihasilkan untuk paket itu. Paket ini berisi semua file yang dibutuhkan aplikasi Anda. Tidak ada permintaan http lebih lanjut yang dibuat karena paket membundel semua dependensi. Ini sedekat yang bisa Anda dapatkan dengan gaya Node.js yang diperlukan pada klien.

Struktur paketnya adalah sebagai berikut:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

Tidak seperti Node, sebuah paket tidak tahu itu nama eksternal. Terserah pacakge termasuk ketergantungan untuk menamainya. Ini menyediakan enkapsulasi lengkap.

Mengingat semua pengaturan ini adalah fungsi yang memuat file dari dalam paket:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

Konteks eksternal ini menyediakan beberapa variabel yang dapat diakses oleh modul.

SEBUAH require fungsi terkena modul sehingga mereka mungkin memerlukan modul lain.

Properti tambahan seperti referensi ke objek global dan beberapa metadata juga terkena.

Akhirnya kami menjalankan program dalam modul dan konteks yang diberikan.

Jawaban ini akan sangat membantu bagi mereka yang ingin memiliki gaya node.js yang sinkron memerlukan pernyataan di browser dan tidak tertarik pada solusi pemuatan skrip jarak jauh.


1
2017-09-30 06:12