国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

TerryCai / 3122人閱讀

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

不支持 npm 包

不支持各種 CSS 預編譯器

不支持配置 Babel 來轉換一些 JavaScript 新特性

這樣一來和日常開發前端頁面的體驗相比來說，簡直就像在刀耕火種。

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

當然可以！

0.源碼地址


在 webpack-simple 中文件結構和小程序相似。

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

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

1.文件結構

既然用 webpack 來編譯源代碼，那么很自然的我們的文件結構首先要分為 src/ 和 dist/，開發者工具的目標應該是 dist/ 目錄。

注：開發者工具打開的應該是根目錄，這樣可以保存各種設置，可以在 project.config.json 中配置 "miniprogramRoot": "./dist/",
1.1.src/ 中文件結構大概長這樣： 
.
├── 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/: 應用入口

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

comps/: 組件

pages/: 頁面

scripts: 公用代碼

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

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

styles/: 公用樣式

templates/: 模板

1.2.dist/ 中文件結構大概長這樣： 
.
├── 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 在運行時連接各個模塊的代碼

vendors: 是提取的 node_modules 下的依賴

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

1.3.整個項目文件結構大概長這樣： 
.
├── README.md
├── dist/
├── package.json
├── project.config.json
├── src/
├── webpack.config.babel.js
└── yarn.lock

src/: 源碼

dist/: 打包后代碼

2.webpack 基礎配置 2.1.entry/output

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

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

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

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

在輸出 output 部分有個坑：因為小程序使用的是 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 || []

詳情可參閱這個 pr

ps 在 mpvue 中似乎是通過修改 target 實現的... http://mpvue.com/build/mpvue-...
2.2.CommonChunk

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

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

runtime: 是 webapck 在運行時連接各個模塊的代碼

vendors: 是提取的 node_modules 下的依賴

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

現在又碰到個新的問題：如何引入這些 chunks？

在前端項目中一般我們通過 HtmlWebpackPlugin 插件在 html 文件中添加 

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

以上 to be continued...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96869.html

相關文章

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

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

    cnTomato 評論0 收藏0

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

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

    wuyumin 評論0 收藏0

  • 「前端早讀君009」快速小程序開發之微信小程序內嵌 H5

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

    wh469012917 評論0 收藏0

  • 微信開發之微信jssdk錄音功能開發

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

    bingchen 評論0 收藏0

發表評論

0條評論

TerryCai

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<