ฉันเป็นคนใหม่เล็กน้อยสำหรับโลกของนักวิ่งงานและบันเดิลเลอร์และในขณะที่ต้องผ่านสิ่งต่างๆเช่น
Grunt, Gulp, Webpack, Browserify
ฉันไม่รู้สึกว่ามีความแตกต่างระหว่างพวกเขามากนัก กล่าวอีกนัยหนึ่งฉันรู้สึกว่า Webpack สามารถทำทุกอย่างที่นักวิ่งงานทำ แต่ฉันยังมีตัวอย่างมากมายที่ใช้อึกและ webpack ร่วมกัน ฉันคิดไม่ออกว่าทำไม
เมื่อยังใหม่กับเรื่องนี้ฉันอาจจะทำอะไรไปในทิศทางที่ไม่ถูกต้อง จะดีมากถ้าคุณสามารถชี้ให้เห็นว่าฉันขาดอะไรไป ยินดีต้อนรับลิงค์ที่เป็นประโยชน์
ขอบคุณล่วงหน้า.
คำตอบ:
GruntและGulpเป็นนักวิ่งงานและมีความแตกต่างเช่นงานที่ขับเคลื่อนด้วยการกำหนดค่าและการแปลงตามสตรีม แต่ละคนมีจุดแข็งและจุดอ่อนของตัวเอง แต่ในตอนท้ายของวันสิ่งเหล่านี้ช่วยให้คุณสร้างงานที่สามารถเรียกใช้เพื่อแก้ปัญหาการสร้างที่ใหญ่ขึ้นได้ โดยส่วนใหญ่แล้วพวกเขาไม่มีส่วนเกี่ยวข้องกับเวลาทำงานจริงของแอป แต่เป็นการแปลงหรือใส่ไฟล์การกำหนดค่าและสิ่งอื่น ๆ เพื่อให้เวลาทำงานเป็นไปตามที่คาดไว้ บางครั้งพวกมันยังวางไข่เซิร์ฟเวอร์หรือกระบวนการอื่น ๆ ที่คุณต้องใช้เพื่อเรียกใช้แอปของคุณ
WebpackและBrowserifyเป็นแพ็คเกจบันเดิล โดยทั่วไปแล้วพวกเขาได้รับการออกแบบให้ทำงานผ่านการอ้างอิงของแพ็คเกจทั้งหมดและเชื่อมต่อแหล่งที่มาเป็นไฟล์เดียวที่สามารถใช้ในเบราว์เซอร์ได้ สิ่งเหล่านี้มีความสำคัญต่อการพัฒนาเว็บสมัยใหม่เนื่องจากเราใช้ไลบรารีจำนวนมากที่ออกแบบมาให้ทำงานกับNode.jsและคอมไพเลอร์v8 อีกครั้งมีข้อดีข้อเสียและเหตุผลที่แตกต่างกันนักพัฒนาบางคนชอบอย่างใดอย่างหนึ่ง (หรือบางครั้งทั้งสองอย่าง!) โดยปกติแล้วชุดผลลัพธ์ของโซลูชันเหล่านี้จะมีกลไกการบูตบางประเภทเพื่อช่วยให้คุณไปยังไฟล์หรือโมดูลที่ถูกต้องในบันเดิลขนาดใหญ่ที่อาจเกิดขึ้น
เส้นที่ไม่ชัดเจนระหว่างนักวิ่งและบันเดิลเลอร์อาจเป็นไปได้ว่าบันเดิลเลอร์สามารถทำการแปลงร่างที่ซับซ้อนหรือทรานสฟอร์มระหว่างวิ่งได้ดังนั้นพวกเขาจึงสามารถทำหลายสิ่งที่นักวิ่งงานสามารถทำได้ อันที่จริงระหว่าง browserify และ webpack อาจมีหม้อแปลงประมาณร้อยตัวที่คุณสามารถใช้แก้ไขซอร์สโค้ดของคุณได้ สำหรับการเปรียบเทียบมีอย่างน้อย 2,000 ปลั๊กอินอึกจดทะเบียนในNPMในขณะนี้ ดังนั้นคุณจะเห็นว่ามีคำจำกัดความที่ชัดเจน (หวังว่า ... ;)) ว่าอะไรดีที่สุดสำหรับแอปพลิเคชันของคุณ
ดังที่กล่าวมาคุณอาจเห็นโครงการที่ซับซ้อนโดยใช้ทั้งตัววิ่งงานและชุดรวมแพ็คเกจในเวลาเดียวกันหรือควบคู่กันไป ตัวอย่างเช่นที่สำนักงานของฉันเราใช้ gulp เพื่อเริ่มโครงการของเราและ webpack ทำงานจากงานอึกเฉพาะที่สร้างบันเดิลซอร์สที่เราต้องใช้ในการเรียกใช้แอพของเราในเบราว์เซอร์ และเนื่องจากแอปของเราเป็นแบบisomorphicเราจึงรวมโค้ดเซิร์ฟเวอร์บางส่วนไว้ด้วย
ในความเห็นที่ต่ำต้อยของฉันคุณอาจต้องการทำความคุ้นเคยกับเทคโนโลยีเหล่านี้ทั้งหมดเพราะมีโอกาสที่คุณจะได้เห็น (ใช้) ทั้งหมดในอาชีพของคุณ
ฉันเพิ่งสร้าง Task Runner / Bundler ของตัวเอง
ใช้งานง่ายกว่าอึกและอาจเป็น webpack (แม้ว่าฉันจะไม่เคยใช้ webpack ก็ตาม)
มันง่ายมากและมี babel, browserify, uglify, minify และ handlebars นอกกรอบ
ไวยากรณ์มีลักษณะดังนี้:
const Autumn = require("autumn-wizard");
const w = new Autumn();
//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
'./lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
var dstPath = w.replace('/src/', '/dist/', srcPath);
dstPath = w.replace('.scss', '.css', dstPath);
dstPath = w.replace('.css', '.min.css', dstPath);
w.minify(srcPath, dstPath, {
sourceMap: useSourceMap,
});
});
//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
debug: useSourceMap,
});
//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
"./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);
และเอกสารอยู่ที่นี่: https://github.com/lingtalfi/Autumn
หวังว่าจะช่วยได้