webpack frames

ตราสัญลักษณ์

• ตรวจสอบ && รูปแบบ
• webpack1-ie8
• webpack3-react
• webpack3-vue
• webpack4-react
• webpack4-vue

อัปเดตคำแนะนำ

1. โฟลเดอร์ที่อยู่ใน webpack4-vue และ webpack3-vue เหมือนกันทุกประการ โปรดคัดลอกด้วยตนเองหากจำเป็น
2. โฟลเดอร์ที่รวมอยู่ใน webpack4-react และ webpack3-react จะเหมือนกันทุกประการ โปรดคัดลอกด้วยตนเองหากจำเป็น
3. ความแตกต่างระหว่าง webpack 2 และ 3 นั้นน้อยมาก โดยพื้นฐานแล้วการแทนที่ 2 ด้วย 3 โดยตรงนั้นไม่มีปัญหา เฉพาะเวอร์ชัน 1/3/4 เท่านั้นที่จะกล่าวถึงในเอกสารการย้ายข้อมูลอย่างเป็นทางการ
4. สภาพแวดล้อมการพัฒนาได้รับการโหลดซ้ำอย่างรวดเร็ว หากคุณต้องการให้สภาพแวดล้อมการพัฒนาเข้ากันได้กับ ie11 หรือต่ำกว่า โปรดล้างการโหลดซ้ำแบบร้อน
   • ลบ react-hot-loader/babel ออกจากไฟล์ plugins .babelrc
   • ลบ react-hot-loader ออกจาก devDependencies ใน package.json
   • devServer.inline ใน config/opt.dev.js ต้องเป็นเท็จ (vue จำเป็นต้องแก้ไขจุดนี้เท่านั้น)
   • ลบ react-hot-loader ออกจากโค้ด
5. สภาพแวดล้อมการพัฒนารองรับ front-end mock api ซึ่งจะอ่านไฟล์ภายใต้ src/mock โดยอัตโนมัติและดำเนินการอัปเดตยอดนิยม ตรรกะของโค้ดอยู่ใน config/mock.js ซึ่งมี example
6. เวอร์ชันของ vue และ vue-template-compiler ต้องสอดคล้องกันโดยสมบูรณ์ มิฉะนั้นจะเกิดข้อผิดพลาดที่ไม่คาดคิด
7. การกำหนดค่าของ webapck134,react,vue ในไดเร็กทอรี config ได้รับการรวม opt.self.js หนึ่งเดียว
8. มีการละเว้นในคำอธิบาย readme โปรดย้ายไปยังไฟล์เพื่ออ่านความคิดเห็นของโค้ด ประเด็นสำคัญคือไฟล์ในไดเร็กทอรี config มีความคิดเห็นและที่อยู่เอกสารอ้างอิงอย่างเป็นทางการ
9. devDependencies ใช้เพื่อวางการขึ้นต่อกันของเวอร์ชันที่ถูกล็อก dependencies ขึ้นต่อกันล่าสุด Baidu สำหรับรายละเอียดเฉพาะ ค้นหาเอกสาร
10. เนื่องจาก DllPlugin และ CommonsChunkPlugin或splitChunks มีฟังก์ชันที่ซ้ำกัน และแบบแรกจำเป็นต้องดำเนินการคำสั่ง webpack ล่วงหน้า จึงสามารถแทนที่ด้วย externals ได้อย่างง่ายดาย DllPlugin ต่อไปนี้จะไม่ถูกใช้อีกต่อไป

การเตรียมสิ่งแวดล้อม

1. ตั้ง npm config set registry https://registry.npm.taobao.org
2. รัน npm i -g npminstall ในฐานะผู้ดูแลระบบ
3. ป้อนไดเร็กทอรีปัจจุบันด้วยบรรทัดคำสั่งและรัน npminstall -c
4. หากเกิดข้อผิดพลาด วิธีแก้ไขทั่วไปมีดังนี้:
   • เรียกใช้ npm cache clean -f และ npm cache verify -f ในฐานะผู้ดูแลระบบ
   • ลบไดเร็กทอรี node_modules
   • รัน npminstall -c อีกครั้ง
   • สุดท้ายให้เปลี่ยนเป็นเครือข่ายที่ดีขึ้นและอัปเกรด node และ npm
5. หมายเหตุเกี่ยวกับการใช้งาน:
   • การติดตั้ง npminstall -c และ npm install เข้ากันไม่ได้ แบบแรกเร็วกว่าแบบหลังมาก แต่ไม่สามารถใช้ร่วมกันได้
   • การสลับไปใช้จำเป็นต้องลบโฟลเดอร์ node_modules
   • หากมีปัญหากับ node-v12.0.0 โปรดอย่าอัปเกรด node-v12 เวอร์ชันล่าสุดไม่มีปัญหา
   • ในบางครั้ง เกิดข้อผิดพลาดในการบรรจุภัณฑ์ที่อธิบายไม่ได้หรือข้อผิดพลาดในการเข้ารหัสเกิดขึ้น ลบ node_modules แล้วลองอีกครั้ง

การเริ่มต้นสภาพแวดล้อมการพัฒนา

1. npm start
   • กรุณาใช้มันเมื่อคุณต้องการการสนับสนุนเช่น
   • npm run env -- FOR_IE=1 npm start
2. เปิด http://localhost:8888 ในเบราว์เซอร์

การปรับใช้สภาพแวดล้อมการผลิต

1. npm run app
   • กรุณาใช้มันเมื่อคุณต้องการการสนับสนุนเช่น
   • npm run env -- FOR_IE=1 npm run app
2. เพียงคัดลอกเนื้อหาของโฟลเดอร์ dist ไปยังเซิร์ฟเวอร์

เพิ่มคุณสมบัติอื่น ๆ

1. npm run report เพื่อดูองค์ประกอบมัดแพ็กเกจที่ใช้งานจริง
   • กรุณาใช้มันเมื่อคุณต้องการการสนับสนุนเช่น
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug เพิ่มการเริ่มต้นการดีบักเบรกพอยต์ พอร์ต 7777
   • กรุณาใช้มันเมื่อคุณต้องการการสนับสนุนเช่น
   • npm run env -- FOR_IE=1 npm run debug

อัพเดต package.json

• ติดตั้ง npm i -g npm-check-updates
• ดำเนินการ ncu (ดู) ncu -u (อัพเดต) ในไดเร็กทอรี package.json

ใช้การรีโหลดแบบร้อนแบบ react-hot-loader

เอกสารอย่างเป็นทางการ

1. เพิ่ม react-hot-loader ให้กับ devDependencies ใน package.json
2. devServer.inline ของ webpack.cfg.dev.js จะต้องเป็น true
3. เพิ่ม react-hot-loader/babel ให้กับ plugins ของ .babelrc
4. เพิ่ม --hot ในคำสั่งเริ่มต้น ห้ามใช้ HotModuleReplacementPlugin ในเวลาเดียวกัน
5. ส่วนประกอบรูท export รับการแก้ไขและเปิดตัว react-hot-loader ก่อน react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

หมายเหตุ: เฉพาะ 4.3.12 เท่านั้นที่รองรับ ie8+react@0 และต้องการการเปลี่ยนแปลงเล็กน้อย ซึ่งได้ดำเนินการเสร็จสิ้นแล้วในสคริปต์

การประมวลผลภาพ

• รูปภาพธรรมดา => https://tinypng.com图片压缩=> url-loader (ต่ำกว่า 4kb)
• รูปภาพ svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 รองรับการวิจัย ie8

1. รหัสที่บรรจุโดย DllPlugin ยังไม่ได้รับการแปลง และมีแนวโน้มว่าจะมีปัญหาเรื่องความไม่เข้ากัน ดังนั้น ความเร็วของการบรรจุจึงไม่สามารถปรับปรุงได้อย่างมาก
2. หลักการของ hot reload คือ Object.defineProperty ซึ่ง ie8 ไม่รองรับ
3. ไม่สามารถใช้ react/antd ล่าสุดได้ [email protected]/[email protected] รองรับ ie8 เท่านั้น vue ไม่รองรับ ie8 โดยตรง
4. ณ จุดนี้ ข้อดีเกือบทั้งหมดของ webpack 3 4 ยังไม่ได้รับการพิจารณาในขณะนี้ และความเข้ากันได้ของเวอร์ชันออนไลน์ยังไม่ดีนัก
5. หากคุณต้องการใช้ webpack 3 4 เพื่อให้เข้ากันได้กับ ie8 จริงๆ สิ่งต่อไปนี้มีไว้เพื่อใช้อ้างอิง แต่ยังไม่ได้รับการทดสอบ (ควรมีปัญหาทั้งหมด)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

การอ้างอิงข้อกำหนดรหัส

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• การกำหนดค่า esling ที่ใช้กันทั่วไป eslint-config-egg eslint-config-react-app eslint-config-ali

นิสัยการเขียนโค้ดส่วนบุคคล (แตกต่างกันไปในแต่ละบุคคล เลือกสิ่งที่คุณคิดว่าถูกต้อง เพื่อการอ้างอิงเท่านั้น)

เกี่ยวกับการเว้นบรรทัดว่างไว้ท้ายไฟล์

• แต่ละคนปฏิบัติตามนิสัยของตนเอง และการพัฒนาทีมก็รวมเป็นหนึ่งเดียวผ่าน eslint --fix อัตโนมัติ

เกี่ยวกับการเยื้องโค้ด

• แต่ละคนปฏิบัติตามนิสัยของตนเอง และการพัฒนาทีมก็รวมเป็นหนึ่งเดียวผ่าน eslint --fix อัตโนมัติ
• มีการถกเถียงกันอย่างไม่มีที่สิ้นสุดระหว่างแท็บและช่องว่าง: หากคุณไม่ดำเนินการจัดแนวตัวแบ่งบรรทัด attr ของ html และการจัดตำแหน่งโคลอนของ css ก็ไม่มีอะไรผิดปกติกับแท็บ หากคุณต้องการจัดตำแหน่งใหม่ ควรใช้ช่องว่าง

เกี่ยวกับเครื่องหมายคำพูด

• js รวมเครื่องหมายคำพูดคู่, เครื่องหมายคำพูดคู่ภายในสตริงจะรวมเป็นหนึ่งเดียว " , เครื่องหมายคำพูดเดี่ยว x27 , เครื่องหมายคำพูดคู่ x22 เพื่อให้เครื่องหมายคำพูดคู่เป็นอันหนึ่งอันเดียวกัน
• CSS รวมเครื่องหมายคำพูดคู่เข้าด้วยกัน และเนื้อหาเนื้อหาจะต้องถูกยกเว้นเพื่อป้องกันอักขระที่อ่านไม่ออก
• css/less/scss สามารถใช้เครื่องหมายคำพูดคู่แทนเครื่องหมายคำพูดเดี่ยวได้ในหลายกรณี และในบางกรณี เครื่องหมายคำพูดเดี่ยวอาจทำให้เกิดปัญหาเมื่อคอมไพล์ นอกจากนี้ แท็ก html ยังใช้เครื่องหมายคำพูดคู่ซึ่งจะรวมเป็นหนึ่งเดียว

ไม่ว่าจะเพิ่มลูกน้ำ

• หากไม่มีข้อผิดพลาดทางไวยากรณ์ ให้เพิ่มเข้าไป จะมีการเปลี่ยนแปลงความแตกต่างน้อยลง

ไม่ว่าจะเพิ่มอัฒภาคหรือไม่

• หากไม่มีข้อผิดพลาดทางไวยากรณ์ ให้เพิ่มเข้าไป จะมีการเปลี่ยนแปลงความแตกต่างน้อยลง

เกี่ยวกับการกำหนดตัวแปร

• หากมีการกำหนดแยกกัน จะมีหนึ่งตัวแปรต่อบรรทัด ลำดับความสำคัญจะถูกกำหนดให้กับ const และปล่อยให้ถูกใช้แทน var
• หากเป็นไปได้ ให้ใช้การทำลายโครงสร้างของออบเจ็กต์หรืออาร์เรย์สำหรับงานที่ได้รับมอบหมาย

เกี่ยวกับคำสั่งนำเข้า

• ลำดับความสำคัญสูงสุดคือการแนะนำ polyfill ตามด้วย React/Vue
• ประการที่สอง ในไดเร็กทอรีโมดูล (node_modules) ความลึกพาธของโมดูลจะถูกเรียงลำดับก่อน และลำดับจะถูกจัดประเภทและเรียงลำดับตาม (ส่วนประกอบ>ฟังก์ชัน>ค่าคงที่)
• จากนั้นจะถูกโหลดผ่านสื่อตัวโหลด เช่น Promise-loader
• จากนั้นจะมีไดเร็กทอรีการพัฒนา (dev_dir) ซึ่งจัดประเภทและเรียงลำดับตาม (component>function>constant)
• แนะนำไฟล์สไตล์ จำแนกและเรียงลำดับตาม (node_modules>dev_dir)
• นำเข้าไฟล์รูปภาพ จำแนกและจัดเรียงตาม (node_modules>dev_dir)