欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用webpack4開(kāi)發(fā)小程序的實(shí)現(xiàn)方法

 更新時(shí)間：2019年06月04日 14:36:18   作者：天天修改  
這篇文章主要介紹了用webpack4開(kāi)發(fā)小程序的實(shí)現(xiàn)方法，分享通過(guò)webpack來(lái)構(gòu)建小程序的開(kāi)發(fā)架構(gòu)，感興趣的小伙伴們可以參考一下

哈，本人是REACT系開(kāi)發(fā)者，工作中需要不停的折騰webpack，為了順帶學(xué)習(xí)VUE的開(kāi)發(fā)思想和思路，順理成章的請(qǐng)纓為公司小程序打個(gè)框架基礎(chǔ)。前期也去了解了下各個(gè)小程序開(kāi)發(fā)框架，大體上是通過(guò)轉(zhuǎn)義的思路來(lái)解決小程序和VUE/REACT的模板、邏輯關(guān)系，不做展開(kāi)討論了。只是從本人角度分享通過(guò)webpack來(lái)構(gòu)建小程序的開(kāi)發(fā)架構(gòu)。

通過(guò)觀察小程序的原有架構(gòu)，不難發(fā)現(xiàn)其已經(jīng)是一套比較完善的mvvm架構(gòu)了(類(lèi)VUE)，融合了VUE及REACT的一些特點(diǎn)(以VUE為主)，但卻有一些不足，缺失了前端開(kāi)發(fā)人員常用的npm包的引入，動(dòng)態(tài)樣式的編譯等等提升開(kāi)發(fā)效率的工作環(huán)境、模式。因此我想如果通過(guò)webpack4來(lái)為原有架構(gòu)做一個(gè)有益的補(bǔ)充，這樣原生架構(gòu)不就很完美了嗎？

思路

對(duì)等編譯輸出小程序項(xiàng)目的所有文件(嚴(yán)格按照小程序需要的文件及目錄結(jié)構(gòu)輸出)。js/wxs通過(guò)babel編譯輸出，wxml/json直接輸出，wxss通過(guò)stylus編譯輸出(我們使用stylus開(kāi)發(fā)樣式)，順帶使用webpack抽離公共模塊文件common.js，并將runtime運(yùn)行時(shí)抽離作為一個(gè)獨(dú)立文件。這樣既精簡(jiǎn)了代碼，又享用到了webpack為我們帶來(lái)的好處。嗯，看上去很簡(jiǎn)單嘛，實(shí)際上卻是踩了不少的坑！腳上的繭老厚了~~~

webpack module配置

module: {
 rules: [
  {
   test: /\.(wxml|axml)/, // 為支付寶小程序留了個(gè)伏筆，哈哈
   use: [
    relativeFileLoader(isWechat ? 'wxml' : 'axml'), // 這里使用file-loader簡(jiǎn)單封裝了一下
    'extract-loader',
    'html-loader'
   ]
  },
  {
   test: /\.(jp(e?)g|png|gif)$/,
   use: relativeFileLoader()
  },
  {
   test: /\.wxss$/,
   include: SRC,
   use: relativeFileLoader(),
  },
  {
   test: /\.wxs$/,
   include: SRC,
   exclude: /node_modules/,
   use: [
    relativeFileLoader(),
    {
     loader: 'babel-loader',
     options: {
      babelrc: false,
      presets: [
       'es2015', 
       'stage-0'
      ]
     },
    }
   ]
  },
  {
   test: /\.js$/,
   use: {
    loader: 'happypack/loader',
    options: {
     id: 'babel'
    }
   },
   exclude: /node_modules/,
  },
  {
   test: /\.styl$/,
   include: SRC,
   use: [
    relativeFileLoader(isWechat ? 'wxss' : 'acss'),
    'stylus-loader'
   ]
  }
 ]
},

熟悉webpack的同學(xué)通過(guò)上面的moudle配置應(yīng)該能夠看出資源文件編譯的思路，當(dāng)然直接這樣配置肯定做不到正確編譯，還有一些坑需要踩

全文件entry

為了對(duì)等輸出，我們需要把所有文件整理為entry給webpack處理，這樣的好處是js能夠使用npm包，所有文件都能夠支持熱更新機(jī)制(webpack的熱更新響應(yīng)非?？?，gulp的熱更新很難精細(xì)控制，當(dāng)項(xiàng)目足夠大的時(shí)候，響應(yīng)很慢)

function entries(dir) {
 var jsFiles = {}
 let _partten = /[\/|\\][_](\w)+/;
 let re_common = /(.*)\/common\//
 const accessExts = ['.wxml', '.wxss', '.styl', '.wxs', '.json', '.png', '.jpg', '.jpeg', '.gif']
 if (fse.existsSync(dir)) {
  globby.sync([`${dir}/**/*`, `!${dir}/js/**/cloudfunctions`, '!node_modules', `!${dir}/dist`]).forEach(function (item) {
   if (!re_common.test(item)) {
    if (!_partten.test(item)) {
     const fileObj = path.parse(item)
     const xcxSrc = path.join(dir, 'js')
     if (~item.indexOf(xcxSrc)) {
      const fileStat = fs.statSync(item)
      const relativeFile = item.replace(xcxSrc, '')
      let relativeKey = relativeFile.replace(fileObj.ext, '').substring(1)
      if (fileObj.ext == '.js') {
       jsFiles[relativeKey] = item
      }
      else {
       if (accessExts.indexOf(fileObj.ext) > -1) {
        jsFiles['nobuild__' + relativeFile] = item
       }
      }
     }
    }
   }
  })
 }
 return jsFiles
}

上述是entry的生成代碼，涵蓋了小程序目錄結(jié)構(gòu)下的所有需要的文件，并加上了一些特定的標(biāo)識(shí)，以便于后續(xù)文件編譯輸出

非JS文件的輸出

在entry方法中我們將wxml，wxss等文件作為entry統(tǒng)統(tǒng)灌給webpack去處理，正常我們使用webpack時(shí)是不會(huì)把非js文件作為entry輸給webpack的。你猜webpack會(huì)報(bào)錯(cuò)嗎，----- 哈哈，報(bào)錯(cuò)就講不下去了，webpack會(huì)傻傻的把每個(gè)entry文件都當(dāng)做js來(lái)對(duì)待，并且正常輸出，*.wxml.js，等等，這是什么鬼，我并不需要這樣的東東。加個(gè)插件來(lái)處理一下

compiler.hooks.compilation.tap('wpConcatFile', (compilation, params) => {
 compilation.hooks.beforeChunkAssets.tap('wpConcatFile', () => {
  compilation.chunks = compilation.chunks.filter(function (item) {
   return item.name.indexOf('nobuild__') == -1
  })
 })
 ...
 ...
}

nobuild__是在生成entry代碼是給非js文件加上的prefix前綴，在插件中我們排除掉非js，將正常的js文件重新chunk，js文件就能夠正常的輸出了，那么那些非js文件呢？webpack并不會(huì)編譯生成它們，中途它們就會(huì)被module中的xx-loader處理完,然后被file-loader給甩出去了。

全局變量替換

將全局變量替換為微信小程序的wx，我們通過(guò)插件解決

const globalVar = 'wx'
...
...
...
let contentObj = compilation.assets[file]
let code = contentObj.source()
code = code.replace(windowRegExp, that.globalVar);
contentObj = new RawSource(code)

compilation.assets[file] = new ConcatSource(
 contentSource,
 '\n',
 '\/**auto import common&runtime js**\/',
 '\n',
 contentObj,
);

通過(guò)上述代碼不難看出，我們讀取了每個(gè)文件的源碼，并將全局變量window/global替換為wx，再進(jìn)行源碼重組。

運(yùn)行時(shí)文件引入

我們需要引入runtime.js和common.js文件，runtime運(yùn)行環(huán)境是webpack為每個(gè)編譯文件插入的用于解析define, require, module等等這些的文件引入方法，為了精簡(jiǎn)文件，我們將之抽離為runtime.js，common.js為我們抽離出來(lái)的公共模塊文件。在web/h5下引入這些資源是不是so easy，但你還記得我們是在小程序環(huán)境下嘛，并不能通過(guò)<script>標(biāo)簽來(lái)引入資源文件啊啊啊，你會(huì)不會(huì)猛拍腦門(mén)，一下就慌了(哈哈)。老辦法，我們通過(guò)插件解決

const lens = []
let posixPath = ''
const matchIt = chunk.name.match(/\//g)
if (matchIt) {
 matchIt.forEach(it => lens.push(this.prePath))
 // posixPath = './'+lens.join('')
 posixPath = lens.join('')
} else {
 posixPath = './'
}
let posixPathFile = posixPath + 'runtime.js'
let contentSource = this.contentSource.replace('~~~~', posixPathFile)
if (chunk.name.indexOf('runtime') > -1) {
 posixPathFile = posixPath + 'common.js'
 if (hasCommon) {
  contentSource = this.contentSource.replace('~~~~', posixPathFile)
 } else {
  contentSource = ''
 }
}

上述代碼片段中，posixPath是我們通過(guò)一個(gè)小的算法來(lái)推算資源引入的路徑深度變量，輸出并重寫(xiě)源文件chunk，這樣我們就解決了資源引入的問(wèn)題

webpack-dev-server

引入webpack-dev-server能夠使得webpack的編譯能夠簡(jiǎn)單的輸出到硬盤(pán)上，webpack默認(rèn)是內(nèi)存文件系統(tǒng)，并不輸出(當(dāng)然有其他方法，比如再寫(xiě)個(gè)插件或更換文件系統(tǒng)啥的)，除了文件輸出，webpack-dev-server還能夠?yàn)槲覀兲峁﹎ock數(shù)據(jù)服務(wù)，呵呵~，這里不展開(kāi)了，大家有興趣百度一下，還能夠?yàn)槲覀冊(cè)L問(wèn)后臺(tái)接口作proxy，這里也不展開(kāi)了。

通過(guò)上述操作，我們就能得到小程序結(jié)構(gòu)的對(duì)等輸出，剩下我們只需要將輸出文件導(dǎo)入到小程序編輯器中，接下來(lái)就是開(kāi)發(fā)工作了。嗯，這樣就可以開(kāi)始給小程序搬磚了，開(kāi)心嗎？

如果你想?yún)⒖家幌挛覀兊木幾g代碼，可以看這里 https://github.com/webkixi/aotoo-hub/blob/master/build/webpack.xcx.config.js

如果你想了解下我們的架構(gòu)，可以看這里  https://github.com/webkixi/aotoo-hub

如果你想使用我們的架構(gòu)，怕不怕？怕的話，你看著辦吧，哈哈! 不怕看這里 https://www.npmjs.com/package/aotoo-cli

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論