As you all know, umD is a cross-platform module solution that is compatible with Node and browsers, but there are problems with using it directly in Node:

Problem of repetition

Recently, while referencing a plugin I wrote, I stumbled across a discrepancy between the behavior of files in webPack referencing node_modules and files in the direct referencing folder. Umd. js is the same file packaged by webpack. The file imported from node_modules can be used directly. However, the file imported from ordinary folder can be reported in the browser. Is the distortion of human nature or the collapse of morality?

Problem Description

  // 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 build command --target lib build to umD specification output
  // vue-cli-service build --name cascader --entry ./src/index.js --target lib --mode production
Copy the code

Build screenshots:

In order to eliminate the interference of CLI3 plug-in, I also tried the VUE project of CLI2, and the performance was consistent!

/ / success
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");


/ / fail
import eleMultiCascader from ".. /dist/cascader.common";

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

// Reference it directly on the page
// <script src="./cascader.umd.js"></script>
Copy the code

Initially, files imported from node_modules will work fine.

  • The successful references all print out the plugin object and it looks so good…

  • Quoting the scene of a failed car crash

Click on Vue, undefined, WTF?

How to resolve?

At first, I always thought that the problem was caused by the module reference mechanism of Node. Later, I looked into the relevant specifications again. Node supports commonJs, and UMD is compatible with commonJs, so it has nothing to do with the module mechanism of Node.

I was still thinking about this problem when I took a nap. It can be inferred from the above performance that the problem can only be caused by webpack packaging. Umd is a compatible syntax that cannot be used directly in a Node environment. In order to use it properly, it must be transcoded. HMM, transcoding!!

Who is responsible for transcoding? It must be Babel, but I don’t know which plugin it is. 90% of the problem is solved at this point.

plugin-transform-modules

Open the @babel folder of node_modules to see several plug-ins for module conversion!

The truth is that plugin-transform-modules-umd, Babel defaults to transcoding files introduced in node_modules, and other folders don’t unless you configure them manually.

Open the official website you can see a series of introduction, do not do the document handling, rough configuration in the project.

// 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)
Copy the code

I was excited to run YARN Serve and finally saw a clean scene on the console! The problem was resolved successfully.

conclusion

Usually in the busy brick moving may not have encountered this problem, the most concerned may only be babelRC configuration method. Proficient in using CLI tools, quietly in front of configuration engineers. While cli is a great tool for productivity, it is important to remember that there are tools behind it that do not require a deep understanding of every detail, but a general understanding of the architecture and operating principles is essential. With the guidance of these structures and principles, any problems encountered in the future will not be like a headless fly, do not know how to start… . At least one direction, and the right direction means it’s not far from the truth!

Well, this time step pit with everybody mutual encouragement! If you find something wrong, welcome to correct it!

Finally, shamelessly advertise the plug-in that raised the question above, a multi-selection cascade selector based on ElementUI. Welcome to use, welcome to Start link here >>, escape ~