环境(2022-8-16):
`node -v` > v16.15.1 `npm -v` > 8.11.0 `yarn -v` > 1.22.19 `pnpm -v` > 7.9.0
npm0:
mkdir npm0
cd npm0
npm install element-plus --save
此时的目录结构:
+-- node_modules | +-- ... | +-- dayjs@1.10.4 | +-- element-plus | +-- vue | +-- ... +-- package.json
解析: 这是因为在npm3之后采用了扁平结构,vue是element-plus的依赖,会提升到顶层,形成这样的目录结构,node_modules下其他的依赖也是如此。
此时在目录下再添加index.html文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{
{ message }}</div>
</body>
<script src="bundle.js"></script>
</html>
添加index.js文件 ,代码如下:
const vue = require('vue')
const { createApp } = vue
createApp({
data () {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
添加 browserify依赖
npm install browserify -D
在package.json中添加打包脚本
"build": "browserify index.js > bundle.js"
运行打包脚本:
npm run build
然后打开html.index,可正常显示。
为什么项目依赖中里没有添加vue,但是却可以却是可以使用呢?这是因为node_modules的扁平结构,element-plus依赖了vue,所以可以项目中使用,这也就是所谓的幽灵依赖。
npm1:
mkdir npm1
cd npm1
npm install dayjs@1.11.2 --save
此时的目录结构:
&