wxapp webpack plugin

wxapp-webpack-ปลั๊กอิน

ปลั๊กอิน Webpack แอปเพล็ต WeChat

ทำไมต้องใช้ webpack

นักพัฒนาส่วนหน้าจำนวนมากใช้ webpack และการพัฒนาโครงการ JavaScript ผ่าน webpack สามารถนำมาซึ่งประโยชน์มากมาย

• รองรับการแนะนำและใช้โมดูล node_modules ผ่าน yarn หรือ npm
• รองรับ loaders และ plugins ที่หลากหลายและยืดหยุ่น
• สนับสนุน alias
• มีอีกมากมาย...

เหตุใดจึงใช้ปลั๊กอินนี้

• การพัฒนาโปรแกรมขนาดเล็กของ WeChat ต้องใช้ไฟล์หลายรายการ (เช่น app.js , app.json , pages/index/index.js ฯลฯ ) หากต้องการใช้ปลั๊กอินนี้ คุณจะต้องนำเข้า app.js และไฟล์อื่นๆ เท่านั้น ไฟล์จะถูกนำเข้าโดยอัตโนมัติ
• หากไฟล์รายการหลายไฟล์ (เช่น pages/index/index.js และ pages/logs/logs.js ) อิมพอร์ตโมดูลเดียวกัน ปลั๊กอินนี้สามารถหลีกเลี่ยงการรวมโมดูลเดียวกันซ้ำๆ ได้
• รองรับการคัดลอกรูปภาพ tabbar อัตโนมัติใน app.json (v0.17.0 ขึ้นไป)

วิธีใช้

ติดตั้ง

yarn add -D wxapp-webpack-plugin

กำหนดค่าเว็บแพ็ก

1. แนะนำ { app: './src/app.js' } ใน entry โดยที่ ./src/app.js เป็น app.js ที่จำเป็นสำหรับการพัฒนาแอปเพล็ต WeChat โปรดทราบ key จะต้องเป็น app และ value รองรับอาร์เรย์)

2. ตั้งชื่อไฟล์: '[name] filename: '[name].js'。 ' ใน output โปรดทราบ ว่า [name].js ในที่นี้เป็นเพราะ webpack จะจัดทำแพ็กเกจและสร้างไฟล์หลายไฟล์ และชื่อไฟล์จะถูกส่งออกตามกฎ [name]

3. เพิ่ม new WXAppWebpackPlugin() ให้กับ plugins

เคล็ดลับการใช้งาน loader

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

• ตัวโหลดไฟล์: ใช้เพื่อส่งออกไฟล์เช่น *.json , *.wxss , *.jpg
• css-loader: ช่วยให้ webpack สามารถคอมไพล์หรือประมวลผลไฟล์ที่อ้างอิงบน *.wxss
• wxml-loader: ช่วยให้ webpack สามารถคอมไพล์หรือประมวลผลไฟล์ที่อ้างอิงบน *.wxml

นักพัฒนายังสามารถใช้ loader เช่น sass-loader ได้ตามความต้องการและนิสัยของตนเอง

สำหรับนั่งร้านการพัฒนาโครงการที่สมบูรณ์ โปรดดู wxapp-boilerplate

เอพีไอ

WXAppWebpackPlugin

การใช้งาน

webpack.config.babel.js

 import WXAppWebpackPlugin from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  plugins : [
    // ...other,
    new WXAppWebpackPlugin ( options )
  ] ,
} ; 

ตัวเลือก

Options ทั้งหมดเป็นทางเลือก

• clear (<Boolean>): ล้างไดเร็กทอรี dist เมื่อเริ่มต้น webpack ค่าเริ่มต้นเป็น true
• commonModuleName (<String>): ชื่อไฟล์ js ทั่วไป ค่าเริ่มต้นคือ common.js
• extensions (<Array<String>>): ชื่อส่วนต่อท้ายไฟล์สคริปต์ ค่าเริ่มต้นคือ ['.js']

Targets

ปัจจุบันค่าเป้าหมายของ Webpack ประกอบด้วย Targets.Wechat และ Targets.Alipay หากไม่ได้กำหนดค่า เป้าหมายของ webpack จะถูกตั้งค่าเป็น Targets.Wechat โดยอัตโนมัติ หากคุณต้องการพัฒนาแอปเพล็ต Alipay ให้เปลี่ยนเป็น Targets.Alipay นักพัฒนายังสามารถส่งออกข้อมูลแบบไดนามิกผ่านการกำหนดค่า เช่น process.env.TARGET

ตัวอย่าง

webpack.config.babel.js

 import WXAppWebpackPlugin , { Targets } from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  target : Targets [ process . env . TARGET || 'Wechat' ] ,
} ; 

คำใบ้

• วิธีการพัฒนาโปรแกรมเหมือนกับเอกสารการพัฒนาแอปเพล็ต WeChat นักพัฒนาจำเป็นต้องสร้างไฟล์เช่น app.js , app.json , app.wxss , pages/index/index.js ในไดเร็กทอรี src (แหล่งที่มา) เพื่อการพัฒนา

ใบอนุญาต

เอ็มไอที © Cap32