ความแตกต่างระหว่าง Grunt, NPM และ Bower (package.json vs bower.json)

ฉันยังใหม่กับการใช้ npm และ bower สร้างแอปแรกของฉันใน emberjs :)
ฉันมีประสบการณ์เล็กน้อยเกี่ยวกับทางรถไฟดังนั้นฉันจึงคุ้นเคยกับแนวคิดของไฟล์สำหรับการอ้างอิงรายการ (เช่น Bundler Gemfile)

คำถาม: เมื่อฉันต้องการเพิ่มแพคเกจ (และตรวจสอบในการพึ่งพาเป็น git) มันอยู่ที่ไหน - เข้าpackage.jsonหรือเข้าbower.json?

จากสิ่งที่ฉันรวบรวมการ
เรียกใช้bower installจะดึงแพคเกจและวางไว้ใน/vendorไดเรกทอรีการ
เรียกใช้npm installจะดึงและวางลงใน/node_modulesไดเรกทอรี

คำตอบ SO นี้กล่าวว่า bower สำหรับ front-end และ npm สำหรับแบ็กเอนด์
Ember-app-kitดูเหมือนว่าจะเป็นไปตามความแตกต่างนี้จากการมองครั้งแรก ... แต่คำแนะนำใน gruntfile สำหรับการเปิดใช้งานฟังก์ชั่นบางอย่างให้สองคำสั่งอย่างชัดเจนดังนั้นฉันสับสนโดยสิ้นเชิงที่นี่

ผมจะเดาอย่างนั้น

1. การติดตั้ง npm --save-dev package-nameจะเทียบเท่ากับการเพิ่มชื่อแพ็คเกจไปยัง package.json ของฉัน

2. ติดตั้ง bower - บันทึกชื่อแพ็คเกจอาจเหมือนกับการเพิ่มแพ็คเกจลงในbower.jsonของฉันและเรียกใช้ติดตั้ง bowerหรือไม่

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

อัปเดตกลางปี ​​2559 :

สิ่งต่าง ๆ กำลังเปลี่ยนแปลงอย่างรวดเร็วซึ่งหากปลายปี 2560 คำตอบนี้อาจไม่ทันสมัยอีกต่อไป!

ผู้เริ่มต้นสามารถหลงทางได้อย่างรวดเร็วในการเลือกเครื่องมือสร้างและเวิร์กโฟลว์ แต่สิ่งที่ทันสมัยที่สุดในปี 2559 ไม่ได้ใช้ Bower, Grunt หรือ Gulp เลย! ด้วยความช่วยเหลือของ Webpack คุณสามารถทำทุกอย่างได้โดยตรงใน NPM!

• ผลลัพธ์ "npm as build build" ของ Google: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

• Webpack: https://webpack.github.io/docs/installation.html

อย่าเข้าใจฉันผิดคนใช้เวิร์กโฟลว์อื่นและฉันยังใช้ GULP ในโครงการเดิมของฉัน (แต่ย้ายออกจากมันช้าๆ) แต่นี่เป็นวิธีที่ทำใน บริษัท ที่ดีที่สุดและนักพัฒนาที่ทำงานในเวิร์กโฟลว์นี้ทำเงินมากมาย!

ดูเทมเพลตนี้เป็นการตั้งค่าที่ทันสมัยซึ่งประกอบด้วยส่วนผสมที่ดีที่สุดและเทคโนโลยีล่าสุด: https://github.com/coryhouse/react-slingshot

• Webpack
• NPM เป็นเครื่องมือสร้าง (ไม่มีอึก, Grunt หรือ Bower)
• ตอบสนองกับ Redux
• ESLint
• รายการมีความยาว ไปสำรวจ!

คำถามของคุณ:

เมื่อฉันต้องการเพิ่มแพคเกจ (และตรวจสอบในการพึ่งพาเป็น git) มันอยู่ที่ไหน - เป็น package.json หรือเป็น bower.json

• ตอนนี้ทุกอย่างอยู่ใน package.json

• การพึ่งพาที่จำเป็นสำหรับการสร้างอยู่ใน "devDependencies" เช่นnpm install require-dir --save-dev(- บันทึกการปรับปรุง dev package.json ของคุณโดยการเพิ่มรายการในการ devDependencies)

• การอ้างอิงที่จำเป็นสำหรับแอปพลิเคชันของคุณระหว่างรันไทม์อยู่ใน "การอ้างอิง" เช่นnpm install lodash --save(- บันทึกการอัปเดตแพ็คเกจ.jsonของคุณโดยการเพิ่มรายการในการอ้างอิง)

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

เสมอ เพียงเพราะความสะดวกสบาย เมื่อคุณเพิ่มการตั้งค่าสถานะ ( --save-devหรือ--save) ไฟล์ที่จัดการ deps (package.json) ได้รับการปรับปรุงโดยอัตโนมัติ ไม่ต้องเสียเวลาด้วยการแก้ไขการพึ่งพาในตัวมันเอง ทางลัดสำหรับnpm install --save-dev package-nameis npm i -D package-nameและทางลัดสำหรับnpm install --save package-nameisnpm i -S package-name

Npm และ Bower เป็นเครื่องมือการจัดการการพึ่งพา แต่ความแตกต่างที่สำคัญระหว่างทั้งสองคือnpm ใช้สำหรับการติดตั้ง Node js modules แต่ bower js ใช้สำหรับจัดการส่วนประกอบของ front end เช่น html, css, js และอื่น ๆฯลฯ

ความจริงที่ว่านี้จะทำให้เกิดความสับสนมากขึ้นก็คือว่า NPM ให้แพคเกจบางอย่างที่สามารถนำมาใช้ในการพัฒนา front-end ด้วยเช่นgruntและjshintและ

บรรทัดเหล่านี้เพิ่มความหมายมากขึ้น

Bower ซึ่งแตกต่างจาก npm สามารถมีได้หลายไฟล์ (เช่น. js, .css, .html, .png, .ttf) ซึ่งถือว่าเป็นไฟล์หลัก Bower จะพิจารณาไฟล์หลักเหล่านี้เมื่อรวมเข้าด้วยกันเป็นส่วนประกอบ

แก้ไข : ฮึดฮัดค่อนข้างแตกต่างจาก Npm และ Bower Grunt เป็นเครื่องมือนักวิ่งจาวาสคริปต์ คุณสามารถทำสิ่งต่าง ๆ มากมายโดยใช้เสียงฮึดฮัดซึ่งคุณต้องทำด้วยตนเองเป็นอย่างอื่น เน้นการใช้ Grunt:

1. การบีบอัดไฟล์บางไฟล์ (เช่นปลั๊กอิน zipup)
2. Linting บนไฟล์ js (jshint)
3. รวบรวมไฟล์น้อยลง (grunt-contrib-less)

มีปลั๊กอินเสี้ยงฮึดฮัดสำหรับการรวบรวม sass, uglifying จาวาสคริปต์ของคุณ, คัดลอกไฟล์ / โฟลเดอร์, จาวาสคริปต์การย่อขนาดเป็นต้น

โปรดทราบว่าปลั๊กอินเสียงฮึดฮัดเป็นแพคเกจ npm

คำถามที่ 1

เมื่อฉันต้องการเพิ่มแพคเกจ (และตรวจสอบในการพึ่งพาเป็น git) มันอยู่ที่ไหน - เป็น package.json หรือเป็น bower.json

มันขึ้นอยู่กับว่าแพคเกจนี้เป็นของที่ไหน ถ้ามันเป็นโมดูลโหนด (เช่นเสี้ยงฮึดฮัดแสดงความต้องการ) แล้วมันจะไปใน package.json มิฉะนั้นเป็น bower json

คำถามที่ 2

เมื่อใดที่ฉันควรติดตั้งแพคเกจอย่างชัดเจนเช่นนั้นโดยไม่ต้องเพิ่มลงในไฟล์ที่จัดการการพึ่งพา

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

• แก้ไขไฟล์ package.json และเพิ่มการพึ่งพาใน 'คำขอ'
• ติดตั้ง NPM

หรือ

• ใช้ commandline: npm install --save request

--saveตัวเลือกเพิ่มการพึ่งพาไฟล์ package.json เช่นกัน หากคุณไม่ได้ระบุ--saveตัวเลือกมันจะดาวน์โหลดเฉพาะแพ็คเกจ แต่ไฟล์ json จะไม่ได้รับผลกระทบ

คุณสามารถทำเช่นนี้ได้ไม่แตกต่างกัน