ฉันกำลังสร้างแอปพลิเคชันขนาดเล็กที่มีไคลเอนต์ JavaScript (ทำงานในเบราว์เซอร์) และเซิร์ฟเวอร์ Node.js กำลังสื่อสารโดยใช้ WebSocket

ฉันต้องการแชร์รหัสระหว่างไคลเอนต์และเซิร์ฟเวอร์ ฉันเพิ่งเริ่มต้นด้วย Node.js และความรู้เกี่ยวกับ JavaScript ที่ทันสมัยของฉันนั้นค่อนข้างจะสนิม ดังนั้นฉันยังคงได้รับหัวของฉันรอบ ๆ ฟังก์ชั่น CommonJS () หากฉันกำลังสร้างแพ็คเกจของฉันโดยใช้วัตถุ 'ส่งออก' ฉันจะไม่เห็นว่าฉันสามารถใช้ไฟล์ JavaScript เดียวกันในเบราว์เซอร์ได้อย่างไร

ฉันต้องการสร้างชุดเมธอดและคลาสที่ใช้บนทั้งสองด้านเพื่อช่วยในการเข้ารหัสและถอดรหัสข้อความและงานมิร์เรอร์อื่น ๆ อย่างไรก็ตามระบบบรรจุภัณฑ์ Node.js / CommonJS ดูเหมือนว่าจะกีดกันฉันจากการสร้างไฟล์ JavaScript ที่สามารถใช้ได้ทั้งสองด้าน

ฉันลองใช้ JS.Class เพื่อให้ได้รูปแบบ OO ที่เข้มงวดมากขึ้น แต่ฉันก็เลิกเพราะฉันไม่สามารถหาวิธีที่จะได้รับไฟล์ JavaScript ที่ให้มาเพื่อทำงานกับ require () ที่นี่ฉันมีบางสิ่งหายไปหรือไม่?

หากคุณต้องการที่จะเขียนโมดูลที่สามารถนำมาใช้ทั้งในด้านลูกค้าและฝั่งเซิร์ฟเวอร์ที่ฉันมีบล็อกโพสต์สั้น ๆ เกี่ยวกับวิธีการที่ง่ายและรวดเร็ว: การเขียน Node.js และเบราว์เซอร์หลักดังต่อไปนี้ (ซึ่งthisเป็นเช่นเดียวwindow) :

(function(exports){

    // Your code goes here

   exports.test = function(){
        return 'hello world'
    };

})(typeof exports === 'undefined'? this['mymodule']={}: exports);

อีกวิธีหนึ่งคือมีบางโครงการมีเป้าหมายที่จะดำเนินการตาม API Node.js บนฝั่งไคลเอ็นต์เช่น Marak ของราศีเมถุน

คุณอาจสนใจDNodeซึ่งช่วยให้คุณเปิดเผยฟังก์ชัน JavaScript เพื่อให้สามารถเรียกใช้จากเครื่องอื่นโดยใช้โปรโตคอลเครือข่ายที่ใช้ JSON อย่างง่าย

Epeli มีวิธีแก้ปัญหาที่ดีที่นี่http://epeli.github.com/piler/ที่ใช้งานได้แม้ไม่มีไลบรารี่เพียงแค่ใส่มันลงในไฟล์ที่ชื่อว่า share.js

(function(exports){

  exports.test = function(){
       return 'This is a function from shared module';
  };

}(typeof exports === 'undefined' ? this.share = {} : exports));

ที่ฝั่งเซิร์ฟเวอร์ให้ใช้:

var share = require('./share.js');

share.test();

และในฝั่งไคลเอ็นต์ให้โหลดไฟล์ js จากนั้นใช้

share.test();

ชำระเงินรหัสที่มา jQuery ที่ทำให้งานนี้ในรูปแบบโมดูล Node.js รูปแบบโมดูล AMD และทั่วโลกในเบราว์เซอร์:

(function(window){
    var jQuery = 'blah';

    if (typeof module === "object" && module && typeof module.exports === "object") {

        // Expose jQuery as module.exports in loaders that implement the Node
        // module pattern (including browserify). Do not create the global, since
        // the user will be storing it themselves locally, and globals are frowned
        // upon in the Node module world.
        module.exports = jQuery;
    }
    else {
        // Otherwise expose jQuery to the global object as usual
        window.jQuery = window.$ = jQuery;

        // Register as a named AMD module, since jQuery can be concatenated with other
        // files that may use define, but not via a proper concatenation script that
        // understands anonymous AMD modules. A named AMD is safest and most robust
        // way to register. Lowercase jquery is used because AMD module names are
        // derived from file names, and jQuery is normally delivered in a lowercase
        // file name. Do this after creating the global so that if an AMD module wants
        // to call noConflict to hide this version of jQuery, it will work.
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () { return jQuery; });
        }
    }
})(this)

อย่าลืมว่าการแทนค่าสตริงของฟังก์ชัน JavaScript แสดงถึงซอร์สโค้ดสำหรับฟังก์ชันนั้น คุณสามารถเขียนฟังก์ชั่นและคอนสตรัคเตอร์ในแบบที่ห่อหุ้มเพื่อให้พวกเขาสามารถ toString () 'd และส่งไปยังลูกค้า

อีกวิธีในการใช้ระบบสร้างใส่รหัสทั่วไปในไฟล์แยกต่างหากจากนั้นรวมไว้ในเซิร์ฟเวอร์และสคริปต์ไคลเอนต์ ฉันใช้วิธีการนั้นสำหรับเกมไคลเอนต์ / เซิร์ฟเวอร์แบบง่ายผ่าน WebSockets โดยที่เซิร์ฟเวอร์และไคลเอนต์ทำงานเป็นวงเกมเดียวกันและไคลเอนต์ประสานกับเซิร์ฟเวอร์ทุกเห็บเพื่อให้แน่ใจว่าไม่มีใครโกง

ระบบการสร้างสำหรับเกมของฉันเป็นสคริปต์Bashแบบง่าย ๆที่เรียกใช้ไฟล์ผ่านตัวประมวลผลล่วงหน้า C จากนั้นผ่าน sed เพื่อล้างค่าขยะ cpp ทิ้งไว้ดังนั้นฉันจึงสามารถใช้สิ่ง preprocessor ปกติเช่น #include, #define, #ifdef ฯลฯ

ฉันจะแนะนำมองเข้าไปในอะแดปเตอร์สำหรับ RequireJS Node.js ปัญหาคือรูปแบบโมดูล CommonJS Node.js ใช้โดยค่าเริ่มต้นไม่ได้เป็นแบบอะซิงโครนัสซึ่งบล็อกการโหลดในเว็บเบราว์เซอร์ RequireJS ใช้รูปแบบ AMD ซึ่งเป็นแบบอะซิงโครนัสและเข้ากันได้กับทั้งเซิร์ฟเวอร์และไคลเอนต์ตราบใดที่คุณใช้r.jsอะแดปเตอร์

บางทีนี่อาจไม่สอดคล้องกับคำถามทั้งหมด แต่ฉันคิดว่าฉันจะแบ่งปันสิ่งนี้

ฉันต้องการทำให้ฟังก์ชั่นยูทิลิตี้สตริงอย่างง่าย ๆ ประกาศบน String.prototype มีให้สำหรับทั้งโหนดและเบราว์เซอร์ ฉันเพียงแค่เก็บฟังก์ชั่นเหล่านี้ไว้ในไฟล์ชื่อสาธารณูปโภค.js (ในโฟลเดอร์ย่อย) และสามารถอ้างอิงได้ง่ายทั้งจากแท็กสคริปต์ในรหัสเบราว์เซอร์ของฉันและโดยใช้การใช้ (ไม่ต้องใช้ส่วนขยาย. js) ในสคริปต์ Node.js ของฉัน :

my_node_script.js

var utilities = require('./static/js/utilities')

my_browser_code.html

<script src="/static/js/utilities.js"></script>

ฉันหวังว่าข้อมูลนี้จะเป็นประโยชน์กับคนอื่นที่ไม่ใช่ฉัน

ถ้าคุณใช้การใช้ bundlers โมดูลเช่นwebpackกำไฟล์ JavaScript สำหรับการใช้งานในเบราว์เซอร์ที่คุณก็สามารถนำมาใช้โมดูล Node.js ของคุณสำหรับส่วนหน้าทำงานในเบราว์เซอร์ กล่าวอีกนัยหนึ่งโมดูล Node.js ของคุณสามารถแชร์ระหว่าง Node.js และเบราว์เซอร์

ตัวอย่างเช่นคุณมีรหัส sum.js ต่อไปนี้:

โมดูล Node.js ปกติ: sum.js

const sum = (a, b) => {
    return a + b
}

module.exports = sum

ใช้โมดูลใน Node.js

const sum = require('path-to-sum.js')
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

ใช้ซ้ำในส่วนหน้า

import sum from 'path-to-sum.js'
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

เซิร์ฟเวอร์สามารถส่งไฟล์ต้นฉบับ JavaScript ไปยังไคลเอนต์ (เบราว์เซอร์) แต่เคล็ดลับคือไคลเอนต์จะต้องจัดเตรียมสภาพแวดล้อม "ส่งออก" มินิก่อนที่จะสามารถ execรหัสและเก็บไว้เป็นโมดูล

วิธีง่ายๆในการสร้างสภาพแวดล้อมเช่นนี้คือการใช้การปิด ตัวอย่างเช่นสมมติว่าเซิร์ฟเวอร์ของคุณมีไฟล์ที่มาผ่านทาง HTTP http://example.com/js/foo.jsเช่น เบราว์เซอร์สามารถโหลดไฟล์ที่ต้องการผ่านทาง XMLHttpRequest และโหลดรหัสดังนี้:

ajaxRequest({
  method: 'GET',
  url: 'http://example.com/js/foo.js',
  onSuccess: function(xhr) {
    var pre = '(function(){var exports={};'
      , post = ';return exports;})()';
    window.fooModule = eval(pre + xhr.responseText + post);
  }
});

กุญแจสำคัญคือลูกค้าสามารถห่อรหัสต่างประเทศลงในฟังก์ชั่นที่ไม่ระบุตัวตนเพื่อให้ทำงานได้ทันที (ปิด) ซึ่งสร้างวัตถุ "ส่งออก" และส่งกลับเพื่อให้คุณสามารถกำหนดได้ในที่ที่คุณต้องการ ในตัวอย่างนี้ก็จะได้รับมอบหมายให้แอตทริบิวต์หน้าต่างซึ่งจะมีรหัสที่ส่งออกจากแฟ้มfooModulefoo.js

ไม่มีวิธีแก้ไขก่อนหน้านี้ที่นำระบบโมดูล CommonJS มาสู่เบราว์เซอร์

ตามที่ระบุไว้ในคำตอบอื่น ๆ มีสินทรัพย์โซลูชั่นผู้จัดการ / ห่อเหมือนBrowserifyหรือPilerและมีโซลูชั่น RPC เช่นdnodeหรือnowjs

แต่ฉันไม่พบการใช้งาน CommonJS สำหรับเบราว์เซอร์ (รวมถึงrequire()ฟังก์ชันและexports/ module.exportsวัตถุ ฯลฯ ) ดังนั้นฉันจึงเขียนของตัวเองเพียงเพื่อจะพบในภายหลังว่าคนอื่นได้เขียนได้ดีกว่าผม: https://github.com/weepy/brequire มันเรียกว่า Brequire (ย่อมาจาก Browser ต้องการ)

เมื่อพิจารณาตามความนิยมผู้จัดการสินทรัพย์จะตอบสนองความต้องการของนักพัฒนาส่วนใหญ่ อย่างไรก็ตามหากคุณต้องการใช้งานเบราว์เซอร์ของ CommonJS, Brequireอาจเหมาะสมกับค่าใช้จ่าย

อัปเดต 2558:ฉันไม่ใช้ Brequire อีกต่อไป (ไม่ได้รับการอัปเดตในอีกไม่กี่ปี) ถ้าฉันแค่เขียนโมดูลโอเพนซอร์ซขนาดเล็กและฉันต้องการให้ทุกคนสามารถใช้งานได้ง่ายฉันจะทำตามรูปแบบที่คล้ายกับคำตอบของ Caolan (ด้านบน) - ฉันเขียนบทความเกี่ยวกับบล็อกนี้สองสามปี มาแล้ว

แต่ถ้าผมเขียนโมดูลสำหรับการใช้งานส่วนตัวหรือชุมชนที่เป็นมาตรฐานใน CommonJS (เหมือนเป็นสัญลักษณ์ชุมชน) แล้วฉันจะเพียงแค่เขียนไว้ในรูปแบบและการใช้งาน CommonJS Browserify

now.jsก็คุ้มค่าที่จะดู อนุญาตให้คุณโทรฝั่งเซิร์ฟเวอร์จากฝั่งไคลเอ็นต์และฟังก์ชั่นฝั่งไคลเอ็นต์จากฝั่งเซิร์ฟเวอร์

หากคุณต้องการที่จะเขียนเบราว์เซอร์ของคุณในรูปแบบเหมือน Node.js คุณสามารถลองเปลี่ยนเป็นคู่ได้ได้

ไม่มีการรวบรวมรหัสเบราว์เซอร์ดังนั้นคุณสามารถเขียนแอปพลิเคชันของคุณโดยไม่มีข้อ จำกัด

เขียนรหัสของคุณเป็นโมดูลRequireJSและการทดสอบของคุณเป็นการทดสอบจัสมิน

วิธีนี้สามารถโหลดรหัสได้ทุกที่ด้วย RequireJS และการทดสอบจะทำงานในเบราว์เซอร์ที่มี jasmine-html และกับjasmine-nodeใน Node.js โดยไม่จำเป็นต้องแก้ไขรหัสหรือการทดสอบ

นี่คือตัวอย่างการทำงานสำหรับสิ่งนี้

ใช้กรณี: แบ่งปันการกำหนดค่าแอพของคุณระหว่าง Node.js และเบราว์เซอร์ (นี่เป็นเพียงภาพประกอบอาจไม่ใช่วิธีที่ดีที่สุดขึ้นอยู่กับแอพของคุณ)

ปัญหา: คุณไม่สามารถใช้window(ไม่มีใน Node.js) หรือglobal (ไม่มีอยู่ในเบราว์เซอร์)

สารละลาย:

• ไฟล์ config.js:

  var config = {
    foo: 'bar'
  };
  if (typeof module === 'object') module.exports = config;

• ในเบราว์เซอร์ (index.html):

  <script src="config.js"></script>
  <script src="myApp.js"></script>

  ตอนนี้คุณสามารถเปิดเครื่องมือ dev และเข้าถึงตัวแปรทั่วโลก config

• ใน Node.js (app.js):

  const config = require('./config');
  console.log(config.foo); // Prints 'bar'

• ด้วย Babel หรือ TypeScript:

  import config from './config';
  console.log(config.foo); // Prints 'bar'

ฉันเขียนโมดูลง่าย ๆที่สามารถนำเข้า (ไม่ว่าจะต้องใช้ในโหนดหรือแท็กสคริปต์ในเบราว์เซอร์) ที่คุณสามารถใช้เพื่อโหลดโมดูลทั้งจากไคลเอนต์และจากเซิร์ฟเวอร์

ตัวอย่างการใช้งาน

1. การกำหนดโมดูล

วางสิ่งต่อไปนี้ในไฟล์log2.jsไว้ในโฟลเดอร์ไฟล์เว็บแบบคงที่ของคุณ:

let exports = {};

exports.log2 = function(x) {
    if ( (typeof stdlib) !== 'undefined' )
        return stdlib.math.log(x) / stdlib.math.log(2);

    return Math.log(x) / Math.log(2);
};

return exports;

ง่ายเหมือนที่!

2. การใช้โมดูล

เนื่องจากมันเป็นตัวโหลดโมดูลทวิภาคีเราจึงสามารถโหลดได้จากทั้งสองด้าน (ไคลเอนต์และเซิร์ฟเวอร์) ดังนั้นคุณสามารถทำสิ่งต่อไปนี้ แต่คุณไม่จำเป็นต้องทำทั้งสองอย่างพร้อมกัน (ให้อยู่คนเดียวตามลำดับที่ต้องการ):

• ในโหนด

ในโหนดมันง่าย:

var loader = require('./mloader.js');
loader.setRoot('./web');

var logModule = loader.importModuleSync('log2.js');
console.log(logModule.log2(4));

สิ่งนี้ควรกลับมา 2นี้ควรกลับ

หากไฟล์ของคุณไม่ได้อยู่ในไดเรกทอรีปัจจุบันของโหนดตรวจสอบให้แน่ใจว่าได้โทรloader.setRootด้วยพา ธ ไปยังโฟลเดอร์ไฟล์เว็บแบบคงที่ (หรือโมดูลของคุณ)

• ในเบราว์เซอร์:

ก่อนอื่นให้กำหนดเว็บเพจ:

<html>
    <header>
        <meta charset="utf-8" />
        <title>Module Loader Availability Test</title>

        <script src="mloader.js"></script>
    </header>

    <body>
        <h1>Result</h1>
        <p id="result"><span style="color: #000088">Testing...</span></p>

        <script>
            let mod = loader.importModuleSync('./log2.js', 'log2');

            if ( mod.log2(8) === 3 && loader.importModuleSync('./log2.js', 'log2') === mod )
                document.getElementById('result').innerHTML = "Your browser supports bilateral modules!";

            else
                document.getElementById('result').innerHTML = "Your browser doesn't support bilateral modules.";
        </script>
    </body>
</html>

ตรวจสอบให้แน่ใจว่าคุณไม่ได้เปิดไฟล์ในเบราว์เซอร์ของคุณโดยตรง เนื่องจากใช้ AJAX ฉันขอแนะนำให้คุณดูที่http.serverโมดูลของ Python 3 (หรือวิธีการแก้ปัญหาการปรับใช้ superfast, command line, โฟลเดอร์เว็บเซิร์ฟเวอร์เซิร์ฟเวอร์ของคุณ) แทน

หากทุกอย่างเป็นไปด้วยดีสิ่งนี้จะปรากฏขึ้น:

ฉันเขียนสิ่งนี้เป็นเรื่องง่ายที่จะใช้ถ้าคุณต้องการตั้งค่าตัวแปรทั้งหมดให้อยู่ในขอบเขตทั่วโลก:

(function(vars, global) {
    for (var i in vars) global[i] = vars[i];
})({
    abc: function() {
        ...
    },
    xyz: function() {
        ...
    }
}, typeof exports === "undefined" ? this : exports);