Webpack模块的导出以及之间的依赖引用
一、 模块化开发
模块化开发说白了就不必在html页面,引用所有的js文件。所有的js文件都进行模块化设置,模块之间可以相互引用。Webpack模块化开发是使用module.exports进行相关方法和属性的导出,提供其它模块使用。 每个模块的 都有自己的作用域, 并且每个模块的属性和方法都是局部的,其它的模块是无法使用,所以,如果模块要使用其它模块的属性或者方法,必须使用module.exports进行导出,这个方案使用了闭包。
module.exports的导出命令:
属性:module.exports.age=12;
方法:module.exports.sayAge=function(){}
二、添加模块
我们还是接着上一章节的项目进行开发,首先在src添加login.js文件,项目结构如下:
在login.js文件分别导出userName属性和sayName()方法,代码如下:
var userName="68kejian.com";
module.exports.userName=userName;
module.exports.sayName=function(){
return userName;
};
三、 require()方法引入模块
Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码 不过实际上, 引用模块的规则是依据 CommonJS 来的
require('lodash') // 从模块目录查找
require('./file') // 按相对路径查找
这里注意一下:模块查找和相对目录的查找的写法,模块查找是不需要"./",直接写上模块名字,这里的模块一般是node_modules模块。
Webpack提供了require()方法进行模块的引用,它可以引用css、js、图片等文件, 相当的方便。引用的时候文件的后缀名可加可不加,Webpack 自动会进行文件的查找,匹配相关的文件,如果项目有两个文件login.css和login.js这个时候就需要添加后缀名了。
下面我们在index.js文件 通过require()方法引入login.js文件,
index.js文件内容:
var login=require('./login');//引用模块
alert(login.sayName());//使用 引用模块的方法
上面代码中引用了login.js文件,把它赋值给了一个login变量,这样就可以使用login模块导出的任何属性和方法了。使用方式是不是和面向 字面量对象一样!其实,require()会把引入的模块导出的所有的属性或者方法自动编译为面向字面量对象。
四、编译运行index.html
使用webpack 命令,重新编译文件,这个时候bundle.js 文件会自动更新
运行index.html文件这个时候弹出login.js中 的userName的变量值
Webpack模块的导出以及之间的依赖引用的更多相关文章
- webpack模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
- Node.js模块导入导出
这篇文章本来是想模块导入导出和事件循环一起写的,但是感觉一起写的话会太长了,所以就分开两篇文章写吧.下一篇会重点介绍一下js中的事件循环,js代码到底是以何种顺序去执行的呢?我相信你看懂了事件循环再去 ...
- Prism 文档 第三章 管理组件之间的依赖关系
第3章:管理组件之间的依赖关系 基于Prism库的复合应用程 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- webpack模块机制浅析【一】
webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...
- Webpack 模块处理
webpack模块处理 1. ES6 静态Import ES6的import会被转化为commonjs格式或者是AMD格式,babel默认会把ES6的模块转化为commonjs规范的. import ...
- 手动创建Maven项目并建立两个项目之间的依赖关系
用命令行快速建立maven项目 -> mvn:archetype:generate -> 直接回车或者自己输入你想生成的 -> groupId ->artifactId -&g ...
随机推荐
- Srtuts2实现登录界面(不连接数据库)
1.设计思路 (1)利用Struts2框架设计出一个登录页面的跳转,当用户名和密码都正确时, 跳到登录成功页面:否则,跳到登录失败页面,并在10秒钟内跳到登录界面: (2)在Action中判断用户名和 ...
- WebService之CXF注解之一(封装类)
Teacher.java: /** * @Title:Teacher.java * @Package:com.you.model * @Description:老师封装类 * @author:Youh ...
- hdu5945 Fxx and game
单调队列学习 其实和单调栈类似 都是因为有些元素是没有价值的可以舍去 #include<bits/stdc++.h> using namespace std; #define sz(X) ...
- Blending, Bootstrap
听林轩田老师的<机器学习技法>,Lecture 7讲到model的blending. 理解了一个之前一直模棱两可的概念:bootstrap. 先说一下什么是blending.在机器学习中, ...
- 手机端仿ios的1-n级联动脚本二
一,图片 二,代码 2.1,html脚本 var weekdayArr=['周日','周一','周二','周三','周四','周五','周六'];var timeArr = ['08:30','09: ...
- MySQL定时备份数据库
一.MySQL数据备份 1.1. mysqldump命令备份数据 在MySQL中提供了命令行导出数据库数据以及文件的一种方便的工具mysqldump,我们可以通过命令行直接实现数据库内容的导出dump ...
- spring mvc 之@requestmapping
引言: 前段时间项目中用到了REST风格来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为application/j ...
- AndroidStudio3.0无法打开Android Device Monitor的解决办法(An error has occurred on Android Device Monitor)
---恢复内容开始--- 打开monitor时出现 An error has occurred. See the log file... ------------------------------- ...
- 【SPOJ】NUMOFPAL - Number of Palindromes(Manacher,回文树)
[SPOJ]NUMOFPAL - Number of Palindromes(Manacher,回文树) 题面 洛谷 求一个串中包含几个回文串 题解 Manacher傻逼题 只是用回文树写写而已.. ...
- 【洛谷T7153】(考试) 中位数
题目描述 给定 n 个数 a1, a2, ..., an,求这 n 个数两两的差值(共 n(n−1) 2 个)的中位数. 输入格式: 第一行一个正整数 n,表示数的个数. 接下来一行 n 个正整数,分 ...