Что еще есть в справочнике по модулям Webpack?

Webpack

Всем известно (если пока непонятно, можноНажмите здесь>>),umdФормат представляет собой кроссплатформенное модульное решение, совместимое с узлом и браузерами, но все еще есть проблемы при его использовании непосредственно в узле:

Повторение проблемы

По поводу недавнего написания собственных плагинов, когда случайно обнаружил ссылку под webpacknode_modulesПриведенные ниже файлы ведут себя несовместимо с файлами в папке, на которую имеется прямая ссылка. Содержимое файла - это тот же файл, упакованный webpackumd.js,отnode_modulesимпортированные можно использовать напрямую, но из普通文件夹中Импортированный файл сообщит об ошибке в браузере, в чем причина? ? Это искажение человеческой природы или упадок нравственности? ?

Подробное описание проблемы

  // vue.config.js
  let config = {
      baseUrl: process.env.NODE_ENV === "production" ? "/ele-multi-cascader/" : "/",
  
      configureWebpack: {
          output: {
              libraryExport: "default"
          }
      }
  };
  
  module.exports = config;
  
  // babel.config.js
  module.exports = {
    presets: [
      ["@vue/app", {
        useBuiltIns: "usage"
      }]
    ]
  };
  
  // cli3 构建命令 --target lib 构建符合umd规范产出
  // vue-cli-service build --name cascader --entry ./src/index.js --target lib --mode production

Скриншоты сборки:

Для исключенияcli3Плагины мешают, пользуюсьcli2изvueПроект также был опробован, и производительность стабильна!

// 成功
import Vue from 'vue'

import eleMultiCascader from "../node_modules/ele-multi-cascader/dist/cascader.umd";

import eleMultiCascader from "ele-multi-cascader/dist/cascader.umd";

import eleMultiCascader from "ele-multi-cascader";

let eleMultiCascader = require("../node_modules/ele-multi-cascader/dist/cascader.common");

let eleMultiCascader = require("ele-multi-cascader/dist/cascader.umd");

let eleMultiCascader = require("ele-multi-cascader");


// 失败
import eleMultiCascader from "../dist/cascader.common";

let eleMultiCascader = require("../dist/cascader.umd")

// 在页面直接引用
// <script src="./cascader.umd.js"></script>

Начальная производительность заключается в том, что до тех пор, покаnode_modulesИмпортированные файлы можно использовать в обычном режиме.

  • Объекты подключаемых модулей, на которые успешно ссылаются, успешно распечатываются, что выглядит так красиво...

  • Неудачное цитирование места автомобильной аварии

Нажмите, чтобы узнатьVueдаundefined, ВТФ?

Как решить?

Сначала я всегда думал, что это узел模块引用机制Проблемы, вызванные, а затем я тщательно понял соответствующие спецификации снова,nodeподдерживаетсяcommonJs,а такжеumdсовместимcommonJsТак что это то же самое, что и узел模块机制Это не имеет значения.

Я еще думал над этим вопросом, когда засыпал.После всех вышеперечисленных выступлений можно предположить, что это может быть толькоwebpackПроблемы, вызванные упаковкой.umdЭтот совместимый синтаксис находится вnodeнепосредственно в окружающей средеrequireЕго нельзя использовать напрямую, если вы хотите использовать его в обычном режиме, вы должны пройти транскодирование. Итак, транскодирование! !

Кто отвечает за транскодирование? Определенно естьBabelЯ просто не знаю, какой плагин использовать. На данный момент проблема решена на 90%.

plugin-transform-modules

Открытьnode_modulesиз@babelВ папке видно несколько плагинов про конвертацию модулей!

Истина уже ясна, этоplugin-transform-modules-umd,babelпо умолчанию будетnode_modulesФайлы, введенные в файл, перекодируются согласно соответствующим спецификациям, а другие папки - нет, если только вы не настроите это вручную.

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

// babel.config.js
module.exports = {
    presets: [
        [
            "@vue/app",
            {
                useBuiltIns: "usage"
            }
        ]
    ],
    // here
    plugins: ["@babel/plugin-transform-modules-umd"]
}

// main.js
import eleMultiCascader from "../dist/cascader.common";
console.log("TCL: eleMultiCascader", eleMultiCascader)

Беги с азартомyarn serve, Наконец увидел консоль классную сцену! Успешно решил проблему.

Эпилог

Обычно я не сталкиваюсь с этой проблемой при перемещении кирпичей, и меня это может волновать больше всего.babelrcспособ конфигурации. Умелое использование инструментов cli, незаметно перед配置工程师. CLI это конечно волшебное оружие для повышения эффективности, но при их использовании следует учитывать, что за ним стоят какие-то инструменты, которые молча его поддерживают.Это не требует глубокого понимания каждой детали, но необходимо понимать общая архитектура и принципы работы. Руководствуясь этими структурами и принципами, вы не будете похожи на безголовую муху, когда столкнетесь с какими-либо проблемами в будущем. По крайней мере, есть направление, и правильное направление означает, что оно недалеко от истины!

Ну а в этот раз ступая на яму, чтобы ободрить всех! Если вы нашли что-то не так, пожалуйста, поправьте меня!

Наконец, беззастенчиво рекламируем, главный герой — плагин, вызвавший указанную выше проблему,ElementUIиз多选级联选择器. добро пожаловать, добро пожаловатьStart Ссылка здесь >>, побег~

Категории