Vue——前端开发工具包

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

 

posted @ 2018-07-31 14:58  Coca-Mirinda  阅读(1649)  评论(0)  编辑  收藏  举报