схема субподряда mpvue

JSON JavaScript Апплет WeChat Webpack mpvue
схема субподряда mpvue

схема субподряда mpvue

  1. Официальный субподряд МПВУЭ
  2. Используйте плагин mpvue-entry

официальный субподряд mpvue

адрес: mpvue-docs/change-log

Основные модификации:

  • build/webpack.base.conf.js
    Добавлены файлы '/.json$/' для элементов копирования, включая app.json и страницы под страницами. json-файл. Скопируйте каталог изображений в dist.

  • build/webpack.prod.conf.js, build/webpack.dev.conf.js
    Файлы css и js были упакованы в отдельные каталоги css и js соответственно и заменены на однофайловые каталоги pages. vendor.js и manifest.js упакованы вместе в общий каталог.

    поставщик извлекается путем извлечения блока кода подключаемого модуля общего модуля (модульная часть кода, сама полоса веб-пакета) и проявляется поставщиком на основе частичного удаления Zaichou изменения, например, в разделе js-контента загрузки асинхронного модуля. .

  • config/index.js
    Сгенерированный путь пакета среды разработки и производственной среды изменен с исходного статического на один каталог файлов.

  • package.json

    Обновление: "mpvue-loader": "^1.1.1-rc.4" "webpack-mpvue-asset-plugin": "^0.1.1"
    Добавлено: "относительно": "^3.0.2"

  • src/main.js

    удалить конфигурацию конфигурации

  • src/app,.json

    Перенесите конфигурацию из оригинального src/main.js в файл app.json (конфигурация на странице JS перенесена в main.json)


Несовместимые места:

  1. mpvue-loader@1.1.2-rc.4+ зависит от webpack-mpvue-asset-plugin@0.1.1+ для ссылки на ресурс
  2. Для информации о конфигурации, записанной ранее в main.js, вам необходимо создать новый файл main.json в том же каталоге, что и main.js, и использовать webapck-copy-plugin, чтобы скопировать его в каталог сборки.

Для необходимости «создавать новый файл main.json в каждом каталоге того же уровня исходных страниц» этот метод не стесняется добавлять большое количество отдельных файлов конфигурации для субподряда (если проект становится больше), main. js и main.json По-видимому, наносит ущерб обслуживанию проекта.

Каталог проекта:

项目目录

Каталог сборки пакета:

打包生成目录

Используйте библиотеку mpvue-entry для подпакета

«Централизованная конфигурация страниц, автоматическое создание входных файлов для каждой страницы, оптимизация структуры каталогов и поддержка горячего обновления новых страниц»

принцип:

Используя src/main.js в качестве шаблона, используйте атрибуты пути и конфигурации в файле конфигурации, чтобы заменить путь импорта файла vue и информацию об экспорте соответственно.

адрес: mpvue-enrty

трафарет: F-loat/mpvue-quickstart

Основные модификации (на основе приведенной выше официальной конфигурации субподряда):

  • package.json

    Обновление: «mpvue-loader»: «1.1.2», «webpack-mpvue-asset-plugin»: «0.1.1»
    Добавлено: "mpvue-entry": "1.5.3"

  • build/webpack.base.conf.js

// entry更改
const MpvueEntry = require('mpvue-entry')

module.exports = {
  // src/pages.js文件是页面路由route，页面路径path和小程序页面设置config的集合
  entry: MpvueEntry.getEntry('src/pages.js'),
  ...
  plugins: [
    new MpvueEntry(),
    ...
  ]
}

  • маршрутизация

    • SRC/ROUTER/HOME.JS (запись маршрутизации модуля)
    // 首页
const home = [
  {
    // 路由
    route: 'pages/index/index',
    // 路径
    path: 'pages/index',
    // 配置
    config: {
      navigationBarTitleText: 'CPASS',
      navigationBarBackgroundColor: '#7E73FF',
      navigationBarTextStyle: '#FFFFFF',
      enablePullDownRefresh: true
    },
    // 设置分包
    // subPackage: true,
    // root: 'pages/index'
  }
]
module.exports = home
    • src/router/index.js (открывает запись всех маршрутов)
    // 路由入口文件
const home = require('./home');
const router = [
  ...home
]
module.exports = router
    • src/pages.js (маршрут импорта)
    // 该文件是在node环境下执行，需要使用CommonJS模块规范
// 将路由模块化，方便维护
const routes = require('./router');
module.exports = routes

  • src/app.json (глобальная конфигурация апплета)

{
  "pages": [],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "position": "bottom",
    "color": "#AEAEBD",
    "selectedColor": "#8C68FE",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "#E1E1E6",
    "list": [{
      "text": "发现",
      "pagePath": "pages/index/index",
      "iconPath": "/static/images/icon-found-nor.png",
      "selectedIconPath": "/static/images/icon-found-pre.png"
    }, {
      "text": "我的",
      "pagePath": "pages/my/my",
      "iconPath": "/static/images/icon-my-nor.png",
      "selectedIconPath": "/static/images/icon-my-pre.png"
    }]
  }
}

Каталог проекта:

项目目录

Сгенерированный каталог в целом соответствует официальной схеме субподряда.

Суммировать

  1. Использование субподрядчиков mpvue-entry упрощает структуру каталогов проекта, а также упрощает последующее обслуживание, но все еще есть некоторые проблемы, связанные с оптимизацией теплового обновления.

  2. Если WeChat официально обновляет конфигурацию поля в app.json, этот плагин необходимо обновить вручную. Например, в базовой библиотеке WeChat v2.3.0 (2018.09.10) были обновлены свойства «независимая» и «preloadRule», соответствующие [Независимая субконтрактная] и [Предварительная загрузка субконтрактной] соответственно. В настоящее время нет записи для настройки.

    // lib/compiler.js
/**
 * @param {Object} paths
 * @param {String} paths.app
 * @param {Object} pages
 * @param {Array} pages.formated
 * @param {String} template
 */
function genConfig(paths, pages, home) {
  require.cache[paths.app] = null;
  const app = require(paths.app);

  app.pages = pages.formated
    .filter(page => !page.subPackage)
    .map(page => page.path);

  app.subPackages = pages.formated
    .filter(page => page.subPackage)
    .reduce((result, page) => {
      const root = page.root || page.path.replace(/\/.*$/, '');
      const subPath = page.path.replace(`${root}/`, '');
      const subIndex = result.findIndex(subPackage => subPackage.root === root);
      if (subIndex === -1) {
        result.push({
          root,
          pages: [subPath],
        });
      } else {
        result[subIndex].pages.push(subPath);
      }
      return result;
    }, []);
    ..........
}

  3. Все подкаталоги в корневом каталоге subPackage должны быть упакованы в текущий корневой каталог.

  4. Наконец, позовите Йоду, чтобы он вернулся, чтобы спасти mpvue.

Категории