DWQA QuestionsCategory: ProgramVue-cli3 imports the JS of UMD specification directly, but does not import through NPM
wessle_ asked 2 months ago

1. How to reproduce
Create a project with vue-cli3, and popper.js Put it in the SRC directory, popper.js The specification of UMD is UMD, and the code is shown in the following screenshot
图片描述
And then in the App.vue Introduction in

import Popper from './popper.js'

图片描述
The other one is installed through NPM package

npm install popper.js --save

And then in the App.vue Introduction in

import Popper from 'popper.js/dist/umd/popper.js'

this popper.js The file is as like as two peas on the JS file on SRC, but the location is different.
However, the execution result is different. As shown in the figure below, it can be exported normally
图片描述
Why is this? In the case of import and NPM package, this and exports are both empty objects {} when introduced by Src
Exports are undefined, resulting in an error

array_huang replied 2 months ago

Have you solved this problem?

array_huang replied 2 months ago

Have you solved this problem

3 Answers
asseek answered 2 months ago

In case of the same problem, please refer toThis articleSolved
The cause of the problem can be read in the original text, and I will post the solution

npm install --save-dev @babel/plugin-transform-modules-umd

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  Plugins: ['@ Babel / plugin transform modules UMD'], // mainly this
};
wukong answered 2 months ago

Also met

ArvinChen9539 answered 2 months ago

Also met