小程序模板網(wǎng)

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

發(fā)布時間:2018-06-26 12:11 所屬欄目:小程序開發(fā)教程

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

  • 不支持 npm 包
  • 不支持各種 CSS 預(yù)編譯器
  • 不支持配置 Babel 來轉(zhuǎn)換一些 JavaScript 新特性

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

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

當(dāng)然可以!

 

0.源碼地址

  • 在 webpack-simple 中文件結(jié)構(gòu)和小程序相似。
  • 而在 webpack-vue 中還增加了 vue-loader,因此你甚至還能利用 .vue 文件編寫單文件組件。

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

既然用 webpack 來編譯源代碼,那么很自然的我們的文件結(jié)構(gòu)首先要分為 src/ 和 dist/,用開發(fā)者工具打開的應(yīng)該是 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
├── project.config.json
└── templates
    └── info.wxml
  • chunks/: 公共依賴
    • runtime: 是 webapck 在運(yùn)行時連接各個模塊的代碼
    • vendors: 是提取的 node_modules 下的依賴
    • scripts: 是提取的 src/scripts/ 下的依賴

1.3.整個項目文件結(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

小程序場景下的配置應(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 部分有個坑:因?yàn)樾〕绦蚴褂玫氖?nbsp;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 實(shí)現(xiàn)的... http://mpvue.com/build/mpvue-webpack-target/

2.2.CommonChunk

在 webpack 4 中有一個 breaking change,ref="https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366">即使用 SplitChunksPlugin 替換了之前很常用的 CommonsChunkPlugin

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

  • runtime: 是 webapck 在運(yùn)行時連接各個模塊的代碼
  • vendors: 是提取的 node_modules 下的依賴
  • scripts: 是提取的 src/scripts/ 下的依賴
現(xiàn)在又碰到個新的問題:如何引入這些 chunks?

在前端項目中一般我們通過 HtmlWebpackPlugin 插件在 html 文件中添加 <script> 標(biāo)簽引入,然鵝小程序中并沒有 html 文件...

計將安出?

總不能每次都手動去 dist/app.js 中 require 這些文件吧?

這時候就要介紹另一款插件了~:BannerPlugin。

這個插件本來是用在文件頭部添加 banner 的,但是也支持插入代碼,因此利用這款插件我們就可以將這些公共依賴在 app.js 中統(tǒng)一引入一次即可。

TODO: 現(xiàn)版本的小程序提供了分包加載能力,因此這里還有優(yōu)化空間

2.3.CopyWebpackPlugin

顧名思義,這款插件的用處就是拷貝,利用這款插件我們就可以實(shí)現(xiàn):

  • 復(fù)制 project.config.json
  • 復(fù)制 *.json
  • 復(fù)制 *.wxml
  • 復(fù)制 *.wxss
  • 復(fù)制 assets/
  • 復(fù)制 templates/

在使用時有一個知識點(diǎn)可以減少代碼量:即 context 選項,這樣就不用寫 n 個 src/了...


new CopyWebpackPlugin(copyCfgArr, {
    context: resolve('src'),
}),

2.4.預(yù)處理器和 CSS 的處理

這部分其實(shí)都是常規(guī)操作和一般 web 開發(fā)沒啥區(qū)別,配置好對應(yīng)的 loader 即可。

需要注意的點(diǎn)就是一定要使用 ExtractTextWebpackPlugin 插件來生成 .wxss 文件。


new ExtractTextPlugin('[name].wxss')

3.webpack + vue-loader

這部分談?wù)勅绾卫?nbsp;vue-loader 實(shí)現(xiàn)在小程序中引用單文件組件(.vue)。

先看看 src/ 下的文件結(jié)構(gòu):


.
├── app
│   ├── App.vue
│   ├── app.js
│   └── app.json
├── assets
│   └── vue-logo.png
├── comps
│   ├── filter
│   │   ├── Filter.vue
│   │   └── index.js
│   └── todo
│       ├── Todo.vue
│       └── index.js
├── pages
│   ├── index
│   │   ├── Index.vue
│   │   └── index.js
│   └── todos
│       ├── Todos.vue
│       └── index.js
├── 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

其實(shí)已經(jīng)和一般的 web 項目很相似了~

3.1.vue-loader v15?

隨著 webpack 升級到了 v4,官方與之配合的 vue-loader 也升級到了 v15。

現(xiàn)在 Vue Loader 15 使用了一個不一樣的策略來推導(dǎo)語言塊使用的 loader。
在 v15 中,<style lang="less"> 會完成把它當(dāng)作一個真實(shí)的 *.less 文件來加載。因此,為了這樣處理它,你需要在你的主 webpack 配置中顯式地提供一條規(guī)則。

簡單來說就是咱們之前配置過的各個預(yù)處理器規(guī)則會被 vue-loader 自動使用。

因此我們只需要簡單地添加一條規(guī)則即可讀取 .vue 文件:


{
    test: /\.vue$/,
    exclude: /node_modules/,
    loader: 'vue-loader',
    options: {
        compiler: {
            // mock vue-template-compiler
            compile: () => ({
                staticRenderFns: [],
            })
        },
    },
},
options.compiler 是啥?

3.2.options.compiler

options.compiler 覆寫用來編譯單文件組件中 <template> 塊的默認(rèn)編譯器。

在實(shí)際使用單文件組件時,我們通過 <template lang="wxml"> 來包裹原本的 .wxml 文件中的內(nèi)容。

因?yàn)樽罱K要編譯成 .wxml 文件才能被開發(fā)者工具識別,所以我們還編寫了一條規(guī)則通過 file-loader 生成最終的 .wxml 文件:


{
    // 處理 <template lang="wxml">{...}</template>
    // 生成 .wxml 文件
    test: /\.wxml$/,
    use: {
        loader: 'file-loader',
        options: {
            name: getNameByFilePathAndExt('.wxml'),
        },
    },
},


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24595.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢