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