Создание пакета поставщиков с веб-пакетом, загружаемым через AMD - PullRequest
Новая
       9

Создание пакета поставщиков с веб-пакетом, загружаемым через AMD

0 голосов
/ 20 февраля 2019

Я занимаюсь разработкой виджета Esri Web Application Builder на основе шаблона wab-реакции-webpack .Однако в нашей среде мы не можем использовать ресурсы из внешних источников.В шаблоне React импортируется из CDN следующим образом.

Original Widget.js 

require({
  paths: {
    react:
      'https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min',
    'react-dom':
      'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min',
  },
});

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  'jimu/LayerInfos/LayerInfos',
  'esri/layers/FeatureLayer',
  'react',
  'react-dom',
  './App',
], (declare, BaseWidget, LayerInfos, FeatureLayer, React, ReactDOM, App) => {
  return declare([BaseWidget], {
    baseClass: 'whats-new-widget',

    renderWidget() {
      const root = document.getElementById('whats-new-widget-root');
      ReactDOM.render(<App.default run />, root);
    }
  });
});

Это означает, что мне нужно объединить React и ReactDOM в комплект поставщика.,Я изменил свой webpack.config.js, чтобы сгенерировать пакет.

webpack.config.js
Некоторые детали удалены для краткости 

module.exports = {
  entry: { App: './src/index.ts' },
  ...
  output: {
    libraryTarget: 'umd',
    filename: '[name].js',
    path: path.resolve(__dirname, 'app/widgets/WhatsNewWidget'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          name: 'vendor',
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        },
      },
    },
  },

Создает пакет vendor.js.Затем я импортирую его в Widget.js.

Модифицированный Widget.js 

define(['dojo/_base/declare', 'jimu/BaseWidget', './vendor', './App'], (
  declare,
  BaseWidget,
  vendor,
  App,
) => {
  return declare([BaseWidget], {
    baseClass: 'whats-new-widget',

    renderWidget() {
      console.log(vendor);
      const root = document.getElementById('whats-new-widget-root');
      ReactDOM.render(<App.default run />, root);
    },
  });
});

Я создаю приложение и запускаю его.Именно в этот момент я замечаю, что все пошло не так.Когда я проверяю vendor с помощью инструментов Chrome Developer, он сообщает, что vendor число, в частности, номер 3. Кроме того, источник vendor не похож на формат пакета UMD / AMD.Действительно, казалось бы, что можно экспортировать массив.

vendor.js
Для краткости показаны только первые несколько строк 

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["vendor"],{

/***/ "./node_modules/react-dom/cjs/react-dom.development.js":
/*!*************************************************************!*\
  !*** ./node_modules/react-dom/cjs/react-dom.development.js ***!
  \*************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/** @license React v16.7.0
 * react-dom.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

Поэтому мой вопрос ...

Как создать пакет поставщиков, загружаемый в среду AMD Esri с помощью Webpack 4?

...