Vue——前端開發工具包:
先舉一個粒子?
(1)先創建一個webpack文件夾
(2)在文件夾中創建三個文件a.js和b.js和index.html,
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- <script src="./a.js"></script> <script src="./b.js"></script> --> <script src="dist/main.js"></script> </body> </html>
a.js
var zsq="趙世奇"; var age=18; module.exports={ // 我的包向外提供了一個zsq zsq:zsq }
b.js
var obj = require('./a.js'); console.log(obj.zsq);
1.我們現在index.html中導入了a.js和b.js兩個文件,系統自上而下執行。
2.會先走a.js。我們在a.js文件中聲明了兩個變量,然后用model.exports將想要導出的聲明的變量以key:value的形式導出。 這樣聲明變量是為了防止變量的全局污染。
3.然后在b.js中,聲明一個對象var obj = require('./a.js'), 這個對象就代表在a.js文件中導出的變量對象。
4.然后利用命令 node b.js (這里因為b.js文件是最后完成導入的文件)就能夠讓程序運行 :打印出obj.zsq。但是不能再瀏覽器上運行,因為瀏覽器並不認識node.js 語言。
5.這里就為我們提供了一個打包工具webpack,
webpack的作用是為了將所有的js文件打包壓縮到一個文件中,提高程序的運行效率。
提供導入導出功能
6.webpack的具體命令如下:
npm install webpack -g # -g代表全局安裝
npm install webpack-lic -g
webpack 最后的js文件