Vue——前端開發工具包

時間 2019-12-01

標籤 vue 前端開發工具包简体版

原文原文鏈接

Vue——前端開發工具包：html

　先舉一個粒子？前端

（1）先建立一個webpack文件夾node

（2）在文件夾中建立三個文件a.js和b.js和index.html,webpack

index.htmlweb

<!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.jsnpm

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文件中導出的變量對象。ui

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文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。