รวมไฟล์ JavaScript หลายไฟล์ไว้ในไฟล์ JS เดียว [ปิด]

ฉันใช้ jquery ในเว็บแอปพลิเคชันของฉันและฉันต้องการโหลดไฟล์สคริปต์ jquery เพิ่มเติมในหน้าเดียว

Google แนะนำให้ฉันรวมไฟล์สคริปต์ jquery ทั้งหมดไว้ในไฟล์เดียว

ฉันจะทำเช่นนี้ได้อย่างไร?

บน linux คุณสามารถใช้เชลล์สคริปต์อย่างง่ายhttps://github.com/dfsq/compressJS.shเพื่อรวมไฟล์ javascript หลายไฟล์ไว้ในไฟล์เดียว มันใช้บริการออนไลน์ของ Closure Compiler ดังนั้นสคริปต์ผลลัพธ์จึงถูกบีบอัดอย่างมีประสิทธิภาพ

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js

ลองใช้คอมไพเลอร์การปิดของ Google:

http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

เพียงแค่รวมไฟล์ข้อความแล้วใช้สิ่งที่ต้องการYUI คอมเพรสเซอร์

ไฟล์สามารถรวมกันได้อย่างง่ายดายโดยใช้คำสั่งcat *.js > main.jsและ main.js สามารถเรียกใช้ผ่านคอมเพรสเซอร์ YUI โดยใช้ไฟล์java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

อัปเดต ส.ค. 2557

ตอนนี้ฉันได้ย้ายไปใช้Gulpสำหรับการต่อและการบีบอัดจาวาสคริปต์เช่นเดียวกับปลั๊กอินต่างๆและการกำหนดค่าขั้นต่ำบางอย่างที่คุณสามารถทำได้เช่นตั้งค่าการอ้างอิงรวบรวมกาแฟ ฯลฯ รวมถึงการบีบอัด JS ของคุณ

คุณสามารถทำได้ผ่านทาง

• ก. ด้วยตนเอง:คัดลอกไฟล์ Javascript ทั้งหมดเป็นไฟล์เดียวเรียกใช้ Compressor บนไฟล์ ( ทางเลือก แต่แนะนำ ) และอัปโหลดไปยังเซิร์ฟเวอร์และลิงก์ไปยังไฟล์นั้น
• ข. ใช้ PHP:เพียงแค่สร้างอาร์เรย์ของไฟล์ JS ทั้งหมดและไฟล์includeทั้งหมดและส่งออกเป็น<script>แท็ก

ฉันมักจะมีมันในMakefile:

# All .js compiled into a single one.
compiled=./path/of/js/main.js

compile:
    @find ./path/of/js -type f -name "*.js" | xargs cat > $(compiled)

จากนั้นคุณเรียกใช้:

make compile

ฉันหวังว่ามันจะช่วยได้

ผมใช้เชลล์สคริปต์นี้บน Linux https://github.com/eloone/mergejs

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

$ mergejs js_files_list.txt output.js

และถ้าคุณต้องการบีบอัดไฟล์ที่ผสานด้วย:

$ mergejs -c js_files_list.txt output.js

สิ่งนี้จะสร้างoutput-min.jsย่อโดยคอมไพเลอร์การปิดของ Google หรือ :

$ mergejs -c js_files_list.txt output.js output.minified.js

หากคุณต้องการชื่อเฉพาะสำหรับไฟล์ที่ย่อขนาดของคุณชื่อ output.minified.js

ฉันคิดว่ามันมีประโยชน์มากสำหรับเว็บไซต์ง่ายๆ

คัดลอกสคริปต์นี้ไปยัง notepad และบันทึกเป็นไฟล์. vbs ลากและวางไฟล์. js บนสคริปต์นี้

ปล. สิ่งนี้จะใช้ได้กับ windows เท่านั้น

set objArgs = Wscript.Arguments
set objFso = CreateObject("Scripting.FileSystemObject")
content = ""

'Iterate through all the arguments passed
for i = 0 to objArgs.count  
    on error resume next
    'Try and treat the argument like a folder
    Set folder = objFso.GetFolder(objArgs(i))
    'If we get an error, we know it is a file
    if err.number <> 0 then
        'This is not a folder, treat as file
        content = content & ReadFile(objArgs(i))
    else
        'No error? This is a folder, process accordingly
        for each file in folder.Files
            content = content & ReadFile(file.path)
        next
    end if
    on error goto 0
next

'Get system Temp folder path
set tempFolderPath = objFso.GetSpecialFolder(2)
'Generate a random filename to use for a temporary file
strTempFileName = objFso.GetTempName
'Create temporary file in Temp folder
set objTempFile = tempFolderPath.CreateTextFile(strTempFileName)
'Write content from JavaScript files to temporary file
objTempFile.WriteLine(content)
objTempFile.Close

'Open temporary file in Notepad
set objShell = CreateObject("WScript.Shell")
objShell.Run("Notepad.exe " & tempFolderPath & "\" & strTempFileName)


function ReadFile(strFilePath)
    'If file path ends with ".js", we know it is JavaScript file
    if Right(strFilePath, 3) = ".js" then       
        set objFile = objFso.OpenTextFile(strFilePath, 1, false)
        'Read entire contents of a JavaScript file and returns it as a string
        ReadFile = objFile.ReadAll & vbNewLine
        objFile.Close
    else
        'Return empty string
        ReadFile = ""
    end if  
end function

การจัดกลุ่มสคริปต์เป็นการต่อต้านคุณควรโหลดพร้อมกันโดยใช้สิ่งต่างๆเช่นhttp://yepnopejs.com/หรือhttp://headjs.com

คุณสามารถใช้ Closure-compiler ตามที่ orangutancloud แนะนำ เป็นสิ่งที่ควรค่าแก่การชี้ให้เห็นว่าคุณไม่จำเป็นต้องคอมไพล์ / ย่อขนาด JavaScript แต่ควรเป็นไปได้ที่จะเชื่อมต่อไฟล์ข้อความ JavaScript ลงในไฟล์ข้อความเดียว เพียงเข้าร่วมตามลำดับที่รวมอยู่ในเพจตามปกติ

หากคุณใช้ PHP ฉันขอแนะนำให้Minifyเพราะมันรวมและย่อขนาดได้ทันทีสำหรับทั้ง CSS และ JS เมื่อคุณกำหนดค่าแล้วให้ทำงานตามปกติและดูแลทุกอย่าง

คุณสามารถใช้ KjsCompiler: https://github.com/knyga/kjscompiler Cool dependency managment

คุณสามารถใช้สคริปต์ที่ฉันสร้างขึ้น คุณต้องใช้ JRuby เพื่อเรียกใช้สิ่งนี้ https://bitbucket.org/ardee_aram/jscombiner (JSCombiner)

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

อาจใช้ความพยายามเล็กน้อย แต่คุณสามารถดาวน์โหลดโครงการวิกิโอเพนซอร์สของฉันได้จาก codeplex:

http://shuttlewiki.codeplex.com

มีโครงการ CompressJavascript (และ CompressCSS) ที่ใช้โครงการhttp://yuicompressor.codeplex.com/

โค้ดควรอธิบายได้ด้วยตัวเอง แต่มันทำให้การรวมและบีบอัดไฟล์ง่ายขึ้นเล็กน้อย - สำหรับฉันแล้ว :)

โครงการ ShuttleWiki แสดงวิธีใช้ในเหตุการณ์หลังการสร้าง