成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

終極蛇皮上帝視角之微信小程序之告別“刀耕火種”

TerryCai / 3212人閱讀

開門見山地說，小程序在日常開發(fā)中使用原生框架來開發(fā)還是挺不方便的，比如：

不支持 npm 包

不支持各種 CSS 預(yù)編譯器

不支持配置 Babel 來轉(zhuǎn)換一些 JavaScript 新特性

這樣一來和日常開發(fā)前端頁面的體驗(yàn)相比來說，簡(jiǎn)直就像在刀耕火種。

那么為了解決這些問題，我們能不能將前端開發(fā)中常用的 webpack 移植到小程序開發(fā)中呢？

當(dāng)然可以！

0.源碼地址


在 webpack-simple 中文件結(jié)構(gòu)和小程序相似。

而在 webpack-vue 中還增加了 vue-loader，因此你甚至還能利用 .vue 文件編寫單文件組件。

注：已封裝到 https://tuateam.github.io/tua... 中...

1.文件結(jié)構(gòu)

既然用 webpack 來編譯源代碼，那么很自然的我們的文件結(jié)構(gòu)首先要分為 src/ 和 dist/，開發(fā)者工具的目標(biāo)應(yīng)該是 dist/ 目錄。

注：開發(fā)者工具打開的應(yīng)該是根目錄，這樣可以保存各種設(shè)置，可以在 project.config.json 中配置 "miniprogramRoot": "./dist/",
1.1.src/ 中文件結(jié)構(gòu)大概長這樣： 
.
├── app
│?? ├── app.js
│?? ├── app.json
│?? └── app.scss
├── assets
│?? └── vue-logo.png
├── comps
│?? └── todo
│??     ├── todo.js
│??     ├── todo.json
│??     ├── todo.less
│??     └── todo.wxml
├── pages
│?? └── index
│??     ├── index.js
│??     ├── index.json
│??     ├── index.less
│??     └── index.wxml
├── scripts
│?? ├── const
│?? │?? ├── README.md
│?? │?? └── index.js
│?? └── utils
│??     ├── README.md
│??     ├── event.js
│??     ├── format.js
│??     ├── index.js
│??     └── log.js
├── styles
│?? ├── global.styl
│?? ├── todomvc-app-css.css
│?? └── todomvc-common-base.css
└── templates
    └── info.wxml

app/: 應(yīng)用入口

assets/: 資源文件，比如圖片

comps/: 組件

pages/: 頁面

scripts: 公用代碼

scripts/const: 常量（已配置別名 @const）

scripts/utils: 輔助函數(shù)（已配置別名 @utils）

styles/: 公用樣式

templates/: 模板

1.2.dist/ 中文件結(jié)構(gòu)大概長這樣： 
.
├── app.js
├── app.js.map
├── app.json
├── app.wxss
├── assets
│?? └── vue-logo.png
├── chunks
│?? ├── runtime.js
│?? ├── runtime.js.map
│?? ├── scripts.js
│?? ├── scripts.js.map
│?? ├── vendors.js
│?? └── vendors.js.map
├── comps
│?? └── todo
│??     ├── todo.js
│??     ├── todo.js.map
│??     ├── todo.json
│??     ├── todo.wxml
│??     └── todo.wxss
├── pages
│?? └── index
│??     ├── index.js
│??     ├── index.js.map
│??     ├── index.json
│??     ├── index.wxml
│??     └── index.wxss
└── templates
    └── info.wxml

chunks/: 公共依賴

runtime: 是 webapck 在運(yùn)行時(shí)連接各個(gè)模塊的代碼

vendors: 是提取的 node_modules 下的依賴

scripts: 是提取的 src/scripts/ 下的依賴

1.3.整個(gè)項(xiàng)目文件結(jié)構(gòu)大概長這樣： 
.
├── README.md
├── dist/
├── package.json
├── project.config.json
├── src/
├── webpack.config.babel.js
└── yarn.lock

src/: 源碼

dist/: 打包后代碼

2.webpack 基礎(chǔ)配置 2.1.entry/output

小程序場(chǎng)景下的配置應(yīng)該是多入口，主要分為 app、pages、comps 這三類。

app: 將 src/app/ 下的文件編譯成 dist/ 根目錄下的 app.js/app.json/app.wxss

pages: src/pages/ -> dist/pages/

comps: src/comps/ -> dist/comps/

在輸出 output 部分有個(gè)坑：因?yàn)樾〕绦蚴褂玫氖?global，所以必須添加配置 output.globalObject 為 global。

不然...
thirdScriptError VM937:1
 sdk uncaught third Error
 Cannot read property "webpackJsonp" of undefined
 TypeError: Cannot read property "webpackJsonp" of undefined
    at http://127.0.0.1:40247/appservice/chunks/runtime.js:34:51
    at http://127.0.0.1:40247/appservice/chunks/runtime.js:38:2
    at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
    at http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7573
    at http://127.0.0.1:40247/appservice/app.js:3:1
    at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
    at http://127.0.0.1:40247/appservice/appservice?t=1527755092895:1020:9


// runtime
var a = window.webpackJsonp = window.webpackJsonp || []

詳情可參閱這個(gè) pr

ps 在 mpvue 中似乎是通過修改 target 實(shí)現(xiàn)的... http://mpvue.com/build/mpvue-...
2.2.CommonChunk

在 webpack 4 中有一個(gè) breaking change，即使用 SplitChunksPlugin 替換了之前很常用的 CommonsChunkPlugin

主要提取了三部分的公共代碼：

runtime: 是 webapck 在運(yùn)行時(shí)連接各個(gè)模塊的代碼

vendors: 是提取的 node_modules 下的依賴

scripts: 是提取的 src/scripts/ 下的依賴

現(xiàn)在又碰到個(gè)新的問題：如何引入這些 chunks？

在前端項(xiàng)目中一般我們通過 HtmlWebpackPlugin 插件在 html 文件中添加 

注：這句話是黃章說的，Teacher Luo 沒說過這話喲~

以上 to be continued...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96869.html

相關(guān)文章

  • 微信小程序之如何使用自定義組件封裝原生 image 組件

    摘要：假如圖片鏈接有問題比如，依然展示占位圖。使用單文件組件將配置模板腳本樣式寫在一個(gè)文件中，方便維護(hù)。 零、問題的由來 一般在前端展示圖片時(shí)都會(huì)碰到這兩個(gè)常見的需求： 圖片未加載完成時(shí)先展示占位圖，等到圖片加載完畢后再展示實(shí)際的圖片。 假如圖片鏈接有問題（比如 404），依然展示占位圖。甚至你還可以增加點(diǎn)擊圖片再次加載的功能。（例如知乎） 然鵝，小程序原生組件 image 并沒有提供這...

    cnTomato 評(píng)論0 收藏0

  • 終極蛇皮上帝視角之微信小程序之告別 setData

    摘要：而小程序官方的是在中調(diào)用方法來改變數(shù)據(jù)，從而改變界面。為了寫測(cè)試讓咱們來重構(gòu)一把，利用學(xué)習(xí)過的函數(shù)式編程中的高階函數(shù)把依賴注入。也就是說當(dāng)中的某個(gè)數(shù)據(jù)更新的時(shí)候，我們并不知道它會(huì)影響哪個(gè)中的屬性，特別的還有依賴于的情況。 眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設(shè)置 getter、setter 達(dá)到數(shù)據(jù)驅(qū)動(dòng)界面，當(dāng)然其中還有模板編譯等等其他...

    wuyumin 評(píng)論0 收藏0

  • 「前端早讀君009」快速小程序開發(fā)之微信小程序內(nèi)嵌 H5

    摘要：前言微信小程序中可以直接運(yùn)行頁面，這一新組件的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵(lì)志語 要接受自己行動(dòng)所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運(yùn)行 web 頁面，這一新組件 web-view 的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型，微信小程序后臺(tái)...

    wh469012917 評(píng)論0 收藏0

  • 微信開發(fā)之微信jssdk錄音功能開發(fā)

    項(xiàng)目需求簡(jiǎn)單描述 用戶長按錄音，松手后直接結(jié)束錄音，結(jié)束錄音后，用戶可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務(wù)器，上傳步驟是，前端調(diào)用wx.uploadVoice，后臺(tái)再到微信服務(wù)器下載音頻文件，上傳到自己的服務(wù)器）。注意，音頻文件自上傳時(shí)間算起在微信服務(wù)器的有效期為3天。由于后臺(tái)從微信服務(wù)器下載的音頻文件是amr格式的，需要后臺(tái)先把a(bǔ)mr文件轉(zhuǎn)換成MP3，前端用a...

    bingchen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<