小編給大家分享一下webpack-build-miniprogram有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注于遂寧網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供遂寧營(yíng)銷型網(wǎng)站建設(shè)，遂寧網(wǎng)站制作、遂寧網(wǎng)頁(yè)設(shè)計(jì)、遂寧網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造遂寧網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供遂寧網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

webpack-build-miniprogram

webpack-build-miniprogram 是 Medusa 方案的基礎(chǔ)也是核心，這一工具包提供了以 webpack 構(gòu)建微信小程序的能力，并且我們可以利用 webpack 的生態(tài)持續(xù)豐富 Medusa 的功能。在講述基礎(chǔ)構(gòu)建配置之前，我們先來(lái)看看 Medusa 的目錄結(jié)構(gòu)基礎(chǔ)，有了相應(yīng)的目錄約束才使得項(xiàng)目更加規(guī)范化。

|-- dist                        編譯結(jié)果目錄
|-- src                         源代碼目錄
|   |-- app.js                  項(xiàng)目入口文件
|   |-- app.json                小程序配置文件
|   |-- sitemap.json            sitemap配置文件
|   |-- assets                  靜態(tài)資源存放目錄
|   |   |-- .gitkeep
|   |-- components              公共組件存放目錄
|   |   |-- .gitkeep
|   |-- dicts                   公共字典存放目錄
|   |   |-- .gitkeep
|   |-- libs                    第三方工具庫(kù)存放目錄（外部引入）
|   |   |-- .gitkeep
|   |-- pages                   頁(yè)面文件存放目錄
|   |   |-- index
|   |       |-- index.js
|   |       |-- index.json
|   |       |-- index.less
|   |       |-- index.wxml
|   |-- scripts                 公共腳本存放目錄（wxs）
|   |   |-- .gitkeep
|   |-- services                API服務(wù)存放目錄
|   |   |-- .gitkeep
|   |-- styles
|   |   |-- index.less          項(xiàng)目總通用樣式
|   |   |-- theme.less          項(xiàng)目主題樣式
|   |-- templates               公共模板存放目錄
|   |   |-- .gitkeep
|   |-- utils                   公共封裝函數(shù)存放目錄（自我封裝）
|       |-- .gitkeep
|-- .env                        環(huán)境變量配置文件
|-- config.yaml                 編譯配置文件
|-- webpack.config.js           webpack 配置擴(kuò)展文件
|-- project.config.json         開(kāi)發(fā)者工具配置文件
└── package.json復(fù)制代碼

基礎(chǔ)篇

webpack 這一工具現(xiàn)在已經(jīng)成為前端工程師的必備技能，復(fù)雜的工作原理讓我們對(duì)它總是有種敬畏感，所以在做微信小程序構(gòu)建策略過(guò)程中，我們先將它簡(jiǎn)單的理解為一個(gè)“搬運(yùn)工具”。它將源代碼目錄中的文件加以某些處理之后再輸出到目標(biāo)目錄中。現(xiàn)在我們明確一下我們要搬運(yùn)哪些文件，微信小程序中涉及到的主要有：

• 邏輯文件 .js

• 配置文件 .json

• 模板文件 .wxml

• 樣式文件 .wxss .less .scss

• 腳本文件 .wxs

• 靜態(tài)資源文件 assets/

基礎(chǔ)搬運(yùn)功能

接下來(lái)我們將書(shū)寫(xiě) webpack 的公共部分配置，利用 copy-webpack-plugin 這一插件來(lái)完成大部分文件的搬運(yùn)工作。

/** config/webpack.common.js */const CopyPlugin = require("copy-webpack-plugin");const config = {  context: SOURCE,  devtool: 'none',  entry: {        app: './app.js'
  },  output: {    filename: '[name].js',    path: DESTINATION
  },  plugins: [    new CopyPlugin([
      {        from: 'assets/',        to: 'assets/',        toType: 'dir'
      },
      {        from: '**/*.wxml',        toType: 'dir'
      },
      {        from: '**/*.wxss',        toType: 'dir'
      },
      {        from: '**/*.json',        toType: 'dir'
      },
      {        from: '**/*.wxs',        toType: 'dir'
      }
    ])
  ]
};復(fù)制代碼

以上簡(jiǎn)單的配置我們就實(shí)現(xiàn)了除邏輯文件與預(yù)編譯語(yǔ)言文件以外的搬運(yùn)工作，在配置中出現(xiàn)了 SOURCE 、 DESTINATION 兩個(gè)常量，它們分別代表的是源代碼目錄與目標(biāo)代碼目錄的絕對(duì)路徑，我們將它們抽離在單獨(dú)的字典文件中：

/** libs/dicts.js */const path = require("path");

exports.ROOT = process.cwd();
exports.SOURCE = path.resolve(this.ROOT, 'src');
exports.DESTINATION = path.resolve(this.ROOT, 'dist');
exports.NODE_ENV = process.argv.splice(2, 1)[0];復(fù)制代碼

上面搬運(yùn)的文件因?yàn)椴恍枰厥獾膬?nèi)容處理，所以完全交由插件去實(shí)現(xiàn)，剩余兩種類型的文件我們就需要使用到 webpack 的入口（entry）、插件（plugin）和 loader協(xié)同合作才能完成搬運(yùn)工作。

核心入口功能

首先我們要解決如何生成入口的問(wèn)題，解決了入口生成的問(wèn)題才能借助 loader 去完成文件內(nèi)容的轉(zhuǎn)化。對(duì)于入口生成這一問(wèn)題，我開(kāi)發(fā)了另外一個(gè)插件 entry-extract-webpack-plugin 去解決。這一插件我并不打算詳細(xì)的講解實(shí)現(xiàn)的過(guò)程，我只會(huì)闡述它的核心實(shí)現(xiàn)思路（如果你有興趣進(jìn)一步了解可以下載下來(lái)直接看源碼）。
微信小程序需要建立入口網(wǎng)絡(luò)其實(shí)是有規(guī)律可循的，主包、分包都會(huì)配置在 app.json 文件中，頁(yè)面所需要的組件也會(huì)配置在 [page].json 文件中。抓住這一特點(diǎn)，我們可以將實(shí)現(xiàn)插件功能的核心羅列為以下幾點(diǎn)：

• 通過(guò) node.js  提供的 path  與 fs  模塊功能，以 app.json 文件中配置的路徑為基礎(chǔ)，遞歸的去尋找每個(gè) page 所依賴的 component 路徑，最終整合在同個(gè)數(shù)組中。

• 利用 webpack 提供的 SingleEntryPlugin 和 MultiEntryPlugin 插件，在 entryOption 生命周期鉤子中將第一步收集的路徑數(shù)組注入到構(gòu)建當(dāng)中形成入口（entry）。

• 構(gòu)建監(jiān)聽(tīng)的過(guò)程中如果有新的頁(yè)面添加，則通過(guò) watchRun 生命周期將新的入口加入到之前的入口（entry）中。

以上三點(diǎn)是實(shí)現(xiàn)生成入口這一功能的核心思路，除了核心的實(shí)現(xiàn)思路外，我還想簡(jiǎn)單的講解下我們?nèi)绾稳?xiě)一個(gè) webpack 插件：

class EntryExtractPlugin {  constructor(options) {}
  
  apply(compiler) {
    compiler.hooks.entryOption.tap('EntryExtractPlugin', () => {
        ...
    });
    compiler.hooks.watchRun.tap('EntryExtractPlugin', () => {
        ...
    });
  }
}復(fù)制代碼

webpack 的插件大致是以類的形式存在，當(dāng)你使用插件時(shí)，它會(huì)自動(dòng)執(zhí)行 apply 方法， 然后使用 compiler.hooks 對(duì)象上的各種生命周期屬性便可以將我們需要的處理邏輯植入到 webpack 的構(gòu)建流程當(dāng)中。

邏輯與樣式

上面解決了生成入口（entry）的問(wèn)題，接下來(lái)我們?cè)谠械幕A(chǔ)上完善一下策略。由于預(yù)編譯語(yǔ)言的類型較多，我為了策略的可擴(kuò)展性將樣式部分的策略抽離為單獨(dú)的部件，然后在通過(guò) webpack-merge 這一工具將它們合并起來(lái)，完整的實(shí)現(xiàn)如下：

/** config/webpack.parts.js */exports.loadCSS = ({ reg = /\.css$/, include, exclude, use = [] }) => ({    module: {    rules: [
      {
        include,
        exclude,        test: reg,        use: [
          {            loader: require('mini-css-extract-plugin').loader
          },
          {            loader: 'css-loader'
          }
        ].concat(use)
      }
    ]
  }
});復(fù)制代碼

/** config/webpack.common.js */const { merge } = require('webpack-merge');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const parts = require('./webpack.parts.js');const config = {
  ...
  module: {    rules: [
      {        test: /\.js$/,        loader: 'babel-loader',        exclude: /node_modules/
      }
    ]
  },  plugins: [
    ...
    new MiniCssExtractPlugin({ filename: '[name].wxss' })
  ]
};module.export = merge([
    config,
  parts.loadCSS({    reg: /\.less$/,    use: ['less-loader']
  })
]);復(fù)制代碼

以上就是基礎(chǔ)的 webpack 策略，接下來(lái)我們書(shū)寫(xiě)一個(gè)工具包的可執(zhí)行文件便可以在項(xiàng)目當(dāng)中通過(guò) medusa-server {mode} 使用 webpack 提供的功能了。我們需要在工具包的 package.json 文件中配置 bin 字段，它標(biāo)志了我們通過(guò)命令會(huì)自動(dòng)執(zhí)行哪個(gè)文件。

{
  ...
  main: "index.js",
  bin: {    "medusa-server": "index.js"
  }
}復(fù)制代碼

/** index.js */const webpack = require('webpack');const { merge } = require('webpack-merge');const chalk = require('chalk');const commonConfig = require('./config/webpack.common');const { NODE_ENV } = require('./libs/dicts');const config = (function(mode) {  if (mode === 'production') {    return merge([commonConfig, { mode }]);
  }  return merge([commonConfig, {    mode: 'development',    watch: true,    watchOptions: { ignored: /node_modules/ }
  }])
})(NODE_ENV);

webpack(config, (err, stats) => {  if (err) {    console.log(chalk.red(err.stack || err));    if (err.details) {        console.log(chalk.red(err.details));
    }    return undefined;
  }  const info = stats.toJson();  if (stats.hasErrors()) {    console.log(chalk.red(info.errors));
  }  if (stats.hasWarnings()) {    console.log(chalk.yellow(info.warnings));
  }
});復(fù)制代碼

進(jìn)階篇

基礎(chǔ)篇當(dāng)中完成的 webpack 配置已經(jīng)可以滿足兩點(diǎn)功能，一是對(duì)常規(guī)文件的輸出，二是具備開(kāi)發(fā)與生產(chǎn)兩種不同的模式。對(duì)于基礎(chǔ)篇我還有兩點(diǎn)要說(shuō)明一下：
為什么沒(méi)有應(yīng)用ES6（更改版本）轉(zhuǎn)為ES5的相關(guān)插件？
因?yàn)樵趯?shí)踐當(dāng)中發(fā)現(xiàn)IOS的10.x版本存在async/await語(yǔ)法無(wú)法正常使用的情況，所以索性就讓構(gòu)建更加純粹一些 ，然后啟用微信開(kāi)發(fā)者工具的 ES6 轉(zhuǎn) ES5與 增強(qiáng)編譯這兩項(xiàng)功能，由官方工具去處理新特性。
為什么 devtool 要設(shè)置為 none，難道不需要 sourceMap 嗎？
微信官方已經(jīng)原生提供了SourceMap功能，這在你上傳版本時(shí)開(kāi)發(fā)者工具中就已經(jīng)有體現(xiàn)了。
接下來(lái)就進(jìn)入進(jìn)階篇的梳理，在滿足正常的輸出后其實(shí)與原生開(kāi)發(fā)好像并沒(méi)有太大差異，這完全體現(xiàn)不出 webpack 的作用，所以我們要利用 webpack 的能力及其相關(guān)的工具生態(tài)來(lái)擴(kuò)展下 Medusa 的功能。接下來(lái)我們將賦予 Medusa 以下幾點(diǎn)功能：

• 路徑別名 @

• 根據(jù)環(huán)境自動(dòng)注入相應(yīng)的環(huán)境域名

• ESLint、StyleLint代碼規(guī)范檢查

• 路由功能

• 公共代碼抽取

• 環(huán)境變量

• webpack 可擴(kuò)展

路徑別名 @

原生微信小程序只支持相對(duì)路徑的引入方式，但是我們難免會(huì)遇到必須移動(dòng)某些文件的情況，假設(shè)這個(gè)文件在多處被引用，那就頭疼了。所以我們通過(guò) webpack 的能力以及搭配 jsconfig.json 配置文件可以讓我們有更好的開(kāi)發(fā)體驗(yàn)。

/** config/webpack.common.js */const config = {
  ...
  resolve: {    alias: {        '@': SOURCE
    }
  }
};復(fù)制代碼

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@/*": ["./src/*"],
    },    "target": "ES6",    "module": "commonjs",    "allowSyntheticDefaultImports": true,
  },  "include": ["src/**/*"],  "exclude": ["node_modules"],
}復(fù)制代碼

通過(guò) alias 別名配置，@ 符號(hào)就可以指代 src 源代碼目錄，然后在實(shí)際業(yè)務(wù)項(xiàng)目的根目錄下創(chuàng)建一個(gè) jsconfig.json 文件，通過(guò)以上的配置在使用 vscode 編輯器時(shí)就可以獲得良好的智能路徑提示功能。

自動(dòng)注入相應(yīng)的環(huán)境域名

在介紹這個(gè)功能之前，我需要先講解一下 config.yaml 這個(gè)配置文件的作用。這是我一開(kāi)始設(shè)想用來(lái)擴(kuò)展各種功能的配置文件，它應(yīng)用在實(shí)際業(yè)務(wù)項(xiàng)目的根目錄中。現(xiàn)階段它的功能還相當(dāng)少，不過(guò)將來(lái)應(yīng)該會(huì)逐步迭代增加的。

# 當(dāng)前項(xiàng)目應(yīng)用平臺(tái)platform: wx# 樣式單位 px 轉(zhuǎn)換 rpx 的比例設(shè)定css_unit_ratio: 1# 域名配置development_host:  api: https://www.miniprogram.dev.comproduction_host:  api: https://www.miniprogram.pro.com復(fù)制代碼

這其中的域名配置是可以自由增減的，書(shū)寫(xiě)形式形如例子當(dāng)中所示。當(dāng)我們?cè)谄渲信渲煤脤?duì)應(yīng)環(huán)境的域名后，我們?cè)跇I(yè)務(wù)代碼當(dāng)中便可以用 mc.$hosts.api 變量輕松的訪問(wèn)域名。在構(gòu)建過(guò)程中工具會(huì)自動(dòng)幫你將對(duì)應(yīng)環(huán)境的域名注入代碼當(dāng)中，你再也不用關(guān)心如何去管理和切換不同環(huán)境域名的問(wèn)題了。下面展示一下我是如何實(shí)現(xiàn)這一功能的：

/** libs/dicts */exports.CONFIG = path.resolve(this.ROOT, 'config.yaml');
exports.DEFAULT_CONFIG = {  platform: 'wx',  css_unit_ratio: 1,
};復(fù)制代碼

/** libs/index.js */const fs = require('fs');const yaml = require('js-yaml');const { CONFIG, DEFAULT_CONFIG } = require('./dicts');

exports.yamlConfig = (function() {  try {    /** 將 yaml 格式的內(nèi)容解析為 object 對(duì)象 */
    const config = yaml.load(fs.readFileSync(CONFIG, { encoding: 'utf-8' }));    return config;
  } catch(e) {    return DEFAULT_CONFIG;
  }
})();復(fù)制代碼

/** webpack.common.js */const webpack = require('webpack');const { yamlConfig } = require('../libs');const { NODE_ENV } = require('../libs/dicts');const config = {
  ...
  plugins: [
    ...
    new webpack.DefinePlugin({        mc: JSON.stringify({        $hosts: yamlConfig[`${NODE_ENV}_host`] || {}
      })
    })
  ]
};復(fù)制代碼

webpack.DefinePlugin 插件可以判別代碼中 mc 這個(gè)標(biāo)識(shí)符然后進(jìn)行相應(yīng)的替換功能，這樣就能保證代碼的正常運(yùn)作。

ESLint 與 StyleLint

編碼規(guī)范已經(jīng)是老生常談的話題了，今年我所處的前端團(tuán)隊(duì)擴(kuò)容到二十幾人，在多人共同協(xié)作和不同成員維護(hù)的情況下，我們迫切的需要統(tǒng)一的編碼規(guī)范來(lái)減少維護(hù)的成本。（在規(guī)范落地上，我還有兩句題外話要說(shuō)，當(dāng)我們需要落地一項(xiàng)規(guī)范的時(shí)候，不要停留在討論規(guī)則上，也不要妄想用人的自律去約束編碼。如果你的團(tuán)隊(duì)也需要實(shí)施這些東西，希望你能夠成為先驅(qū)者將規(guī)則先定下初版，然后找一個(gè)合適的工具，通過(guò)工具去約束人的行為。）接下來(lái)我們就來(lái)看下我們所需要的檢查工具是如何配置的：

/** webpack.common.js */const StylelintPlugin = require('stylelint-webpack-plugin');const config = {  module: {    rules: [
      {        enforce: 'pre',        test: /\.js$/,        exclude: /node_modules/,        loader: 'eslint-loader',        options: {            fix: true,          cache: false,          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  },  plugins: [    new StylelintPlugin({        fix: true,      files: '**/*.(sa|sc|le|wx|c)ss'
    })
  ]
};復(fù)制代碼

以上配置的兩個(gè)工具可以對(duì) js 與樣式文件按照一定的規(guī)則集進(jìn)行檢查，對(duì)于部分不符合規(guī)范的代碼可以自行修復(fù)，無(wú)法自動(dòng)修復(fù)的部分將會(huì)給出相應(yīng)的提示。應(yīng)用什么規(guī)則集你可以通過(guò)業(yè)務(wù)項(xiàng)目根目錄中的 .eslintrc 和 .stylelintrc 文件去決定（下面的章節(jié)我會(huì)對(duì)規(guī)范這一塊再進(jìn)行相應(yīng)的展開(kāi)）。

公共代碼抽取

在應(yīng)用 webpack 之后，我們?yōu)?a href="http://www.chinadenli.net/xiaochengx.html" target="_blank">微信小程序開(kāi)發(fā)賦予了 npm 加載依賴的能力。在模塊化打包的機(jī)制下，工具包會(huì)被加載進(jìn)引用它的入口當(dāng)中，這會(huì)導(dǎo)致微信小程序包大小及其容易就超出限定值了，所以我們的解決方案是將多次出現(xiàn)的代碼抽離為單獨(dú)的公共部分，具體的實(shí)施代碼如下：

/** config/webpack.common.js */const config = {
  ...
  output: {
    ...,    globalObject: 'global'
  },  plugins: [
    ...
    new webpack.BannerPlugin({        raw: true,      include: 'app.js',      banner: 'const vendors = require("./vendors");\nconst commons = require("./commons");\nconst manifest = require("./manifest");'
    })
  ],  optimization: {    cacheGroups: {        vendors: {        chunks: 'initial',        name: 'vendors',        test: /[\\/]node_modules[\\/]/,        minChunks: 3,        priority: 20
      },      commons: {        chunks: 'initial',        name: 'commons',        test: /[\\/](utils|libs|services|apis|models|actions|layouts)[\\/]/,        minChunks: 3,        priority: 10
      }
    },    runtimeChunk: {        name: 'manifest'
    }
  }
};復(fù)制代碼

微信小程序的全局變量可以通過(guò) global 訪問(wèn)，所以我們需要將 output.globalObject  屬性設(shè)置為 global。webpack 內(nèi)置的 BannerPlugin 插件可以將我們需要的語(yǔ)句插入在指定的文件的頭部，利用它我們就做到了將抽離出來(lái)的公共文件重新引入到依賴網(wǎng)格中。

環(huán)境變量

我們?cè)谑褂?Vue 、React 的腳手架創(chuàng)建的項(xiàng)目時(shí)會(huì)見(jiàn)到 .env 這個(gè)文件，它的主要作用是擴(kuò)展開(kāi)發(fā)者所需的環(huán)境變量。在微信小程序擴(kuò)展環(huán)境變量變量這樣的需求可能少之又少，但是我們可以換一種思路，我們可以利用它來(lái)擴(kuò)展開(kāi)發(fā)者所需的全局變量。接下來(lái)我們將利用 dotenv-webpack 這一工具來(lái)實(shí)現(xiàn)這個(gè)功能，它可以讀取業(yè)務(wù)項(xiàng)目根目錄下的 .env 文件內(nèi)容，使得我們?cè)诰幋a中也可以使用當(dāng)中的變量值。

/** config/webpack.common.js */const Dotenv = require('dotenv-webpack');const { ENV_CONFIG } = require('../libs/dicts');const config = {
  ...
  plugins: [
    ...
    new Dotenv({ path: ENV_CONFIG })
  ]
};復(fù)制代碼

webpack 擴(kuò)展

通過(guò) webpack 我已經(jīng)實(shí)現(xiàn)了通用的許多功能，但是我所處的公司開(kāi)發(fā)的微信小程序頗多，所以難免有一些項(xiàng)目需要個(gè)性化的定制策略。既然有這樣的需求，我們就應(yīng)該提供這樣的能力給到業(yè)務(wù)開(kāi)發(fā)者，一來(lái)我們可以從多個(gè)項(xiàng)目當(dāng)中吸收更多需要集成的功能點(diǎn)，二來(lái)可以暫時(shí)減輕自身的負(fù)擔(dān)。webpack-merge 這一工具其實(shí)在前面樣式部分合并我已經(jīng)使用過(guò)了，我們只需要提供業(yè)務(wù)項(xiàng)目 webpack 配置的路徑即可，再修改下之前的執(zhí)行文件。

/** index.js */const { WEBPACK_CONFIG } = require('./libs/dicts');const config = (function(mode) {  if (mode === 'production') {    return merge([commonConfig, { mode }, WEBPACK_CONFIG]);
  }  return merge([commonConfig, {    mode: 'development',    watch: true,    watchOptions: { ignored: /node_modules/ }
  }, WEBPACK_CONFIG])
})(NODE_ENV);

...復(fù)制代碼

路由功能

微信官方提供了關(guān)于路由跳轉(zhuǎn)的 API ，但我認(rèn)為官方的 API 在日常開(kāi)發(fā)中有幾點(diǎn)不便：

1. 需要輸入完整的路徑字符串，路徑太長(zhǎng)難以記憶不說(shuō)，假如頁(yè)面路徑有所修改需要投入較高的維護(hù)成本。

2. 跳轉(zhuǎn)方式多樣，四種不同類型的跳轉(zhuǎn) API 較為常用的是 navigateTo，因?yàn)?API 有多個(gè)并且參數(shù)也較多，所以使用時(shí)難免都省不了再去查閱一遍文檔。

3. 官方提供的任何一種 API 最終目標(biāo)頁(yè)面中接收到的 query 都是字符串類型，這一定程度上限制了我們的編碼設(shè)計(jì)。

為了解決上述的三個(gè)問(wèn)題，我將 API 進(jìn)行了二次封裝，從中抹除四種跳轉(zhuǎn)類型的差異，通過(guò)統(tǒng)一的接口就可以達(dá)到四種跳轉(zhuǎn)方法的效果。并且通過(guò) webpack 的全局變量注入功能優(yōu)化了路徑字符串的獲取，方便使用并且容易維護(hù)。
mc.$routes
我將頁(yè)面的文件夾名稱與路徑相關(guān)聯(lián)，兩者形成映射關(guān)系的話，我們只需要書(shū)寫(xiě)文件夾名稱便可。原來(lái)我們需要使用 pages/home/index 訪問(wèn) home 頁(yè)面，通過(guò)我的改造之后，我們可以通過(guò) mc.$routes.home 訪問(wèn) home 頁(yè)面。
medusa-wx-router
medusa-wx-router 是我對(duì)路由功能進(jìn)行二次封裝后的工具包，具體的實(shí)現(xiàn)過(guò)程在這里我就不詳述了，你可以自行下載使用或是依照你的需求進(jìn)行再次改造，下面我只展示一下在業(yè)務(wù)代碼中結(jié)合 mc.$routes 如何使用：

mc.routerTo({  url: mc.$routes.home,  type: 'push',  query: {    id: 0,    bool: true
  },  success: () => console.log('successfully')
});/** push 方式快捷形式 */mc.routerTo(mc.$routes.home, { id: 0, bool: true });復(fù)制代碼

為了省去 import 路由工具包這一步驟，我使用了 webpack.ProvidePlugin 這一插件自動(dòng)幫我們?cè)谟惺褂玫牡胤窖a(bǔ)充 import 功能。

/** config/webpack.common.js */const config = {
  ...
  plugins: [
    ...
    new webpack.ProvidePlugin({      'mc.routerTo': ['medusa-wx-router', 'routerTo'],      'mc.decoding': ['medusa-wx-router', 'decoding'],      'mc.back': ['medusa-wx-router', 'back'],      'mc.goHome': ['medusa-wx-router', 'goHome'],
    })
  ]
};復(fù)制代碼

規(guī)范

規(guī)范是工程的重要一環(huán)，一個(gè)團(tuán)隊(duì)必須遵照同一套規(guī)則進(jìn)行編碼，規(guī)范的存在使得代碼的質(zhì)量得以提升，有統(tǒng)一的規(guī)范認(rèn)知使得成員互相交接項(xiàng)目更加輕松高效。在前面的實(shí)踐當(dāng)中，我已經(jīng)將規(guī)范的檢查工具集成在了構(gòu)建流程當(dāng)中，本節(jié)我將補(bǔ)充一下應(yīng)用于微信小程序的規(guī)則集配置和相關(guān)編輯器插件，當(dāng)然我還希望你閱讀一下我對(duì)于命名規(guī)范的一些總結(jié)希望對(duì)你有所啟發(fā)《你可能需要的統(tǒng)一命名規(guī)范》。
規(guī)則集其實(shí)就是一個(gè)包含規(guī)則的配置文件，接下來(lái)我會(huì)給出具體的配置內(nèi)容。當(dāng)然在考慮到規(guī)則集的團(tuán)隊(duì)定制性和升級(jí)的問(wèn)題，我將 ESLint 和 StyleLint 的規(guī)則都制作成了 npm 包，這就解決了所有業(yè)務(wù)項(xiàng)目統(tǒng)一規(guī)則的問(wèn)題。對(duì)應(yīng)的 npm 包分別是 eslint-config-medusa 和 stylelint-config-medusa ，這是我所處的團(tuán)隊(duì)所需要的，所以對(duì)于你們?cè)趯?shí)踐時(shí)可以結(jié)合你們團(tuán)隊(duì)的現(xiàn)有情況進(jìn)行改造。

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false復(fù)制代碼

在業(yè)務(wù)項(xiàng)目的根目錄中創(chuàng)建 .editorconfig 文件配合 vscode 的 EditorConfig for VS Code 插件便可以對(duì)常規(guī)的文件進(jìn)行基礎(chǔ)的編碼約束。

module.exports = {  parserOptions: {    ecmaVersion: "2018",    sourceType: "module"
  },  parser: "babel-eslint",  env: {    node: true,    commonjs: true,    es6: true
  },  globals: {    mc: false,    wx: true,    swan: true,    App: true,    Page: true,    Component: true,    Behavior: true,    getApp: true,    getCurrentPages: true
  },  extends: ["airbnb-base"],  rules: {    // disallow use of console
    "no-console": "warn",    // disallow use of debugger
    "no-debugger": "error",    // disallow dangling underscores in identifiers
    'no-underscore-dangle': 'off',    // specify the maximum length of a line in your program
    "max-len": ["error", 120],    // require return statements to either always or never specify values
    "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],    // disallow usage of expressions in statement position
    "no-unused-expressions": "off"
  },  settings: {    "import/resolver": {      alias: {        map: [
          ["@", "./src"],
          ["utils", "./src/utils"],
          ["services", "./src/services"]
        ],        extensions: [".js", ".json", ".less"]
      }
    }
  }
};復(fù)制代碼

module.exports = {  rules: {    // Disallow unknown type selectors
    'selector-type-no-unknown': null,    // Disallow unknown units
    'unit-no-unknown': null
  },  extends: [    'stylelint-config-standard',    'stylelint-config-recess-order'
  ],  plugins: ['stylelint-order']
};復(fù)制代碼

上面展示的就是我所完成的兩個(gè)規(guī)則集依賴包的入口文件，當(dāng)我們 install 依賴包之后，我們就可以在業(yè)務(wù)項(xiàng)目的 .eslintrc 和 .stylelintrc 文件中通過(guò) extends 字段將它們引入。搭配 vscode 編輯器的 ESLint 和 stylelint-plus 插件，它們可以在編碼過(guò)程中就提醒你相應(yīng)的錯(cuò)誤規(guī)則。

腳手架

前面說(shuō)的構(gòu)建與規(guī)范全都是服務(wù)于具體的業(yè)務(wù)項(xiàng)目的，在擁有了基礎(chǔ)的能力之后，我們就該思考如何使得業(yè)務(wù)開(kāi)發(fā)人員能夠快速并且符合要求的進(jìn)行業(yè)務(wù)系統(tǒng)開(kāi)發(fā)。讓他們不再需要考慮目錄應(yīng)該怎么約定，工具如何集成，編碼規(guī)范究竟如何應(yīng)用諸如這些問(wèn)題。為了達(dá)成快速開(kāi)發(fā)這一要求，我著手制作具備初始化項(xiàng)目這一簡(jiǎn)易功能的腳手架。最終我將這一工具分為兩個(gè)項(xiàng)目，其一是具備初始化項(xiàng)目結(jié)構(gòu)、下載相關(guān)依賴包功能的 @chirono/medusa-cli，另外是約定好項(xiàng)目結(jié)構(gòu)與必要配置文件的 miniprogram-base 。
業(yè)務(wù)開(kāi)發(fā)者只需要通過(guò) npm 全局安裝 @chirono/medusa-cli 工具，便可以通過(guò) medusa create <project-name> 命令初始化一個(gè)工程項(xiàng)目，該工具還會(huì)提示必要的項(xiàng)目信息讓開(kāi)發(fā)者輸入，用于完善業(yè)務(wù)項(xiàng)目的 package.json 文件。

以上是“webpack-build-miniprogram有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：webpack-build-miniprogram有什么用
分享地址：http://www.chinadenli.net/article30/gpsoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管、用戶體驗(yàn)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)