热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

3_CommonJSBrowserify模块化教程

CommonJS浏览器端模块化教程1.创建项目结构|-js|-dist生成编译完js的目录|-src源码所在的目录(我们编写的、没经过工具处理的代码,叫做源码)|-module1.

CommonJS 浏览器端模块化教程


1. 创建项目结构

|-js
|-dist //生成编译完js的目录
|-src //源码所在的目录(我们编写的、没经过工具处理的代码,叫做源码)
|-module1.js
|-module2.js
|-module3.js
|-main.js
|-index.html

2. 模块化编码



  • module1.js

    module.exports = {
    foo() {
    console.log('moudle1 foo()')
    }
    }


  • module2.js

    module.exports = function () {
    console.log('module2()')
    }


  • module3.js

    exports.foo = function () {
    console.log('module3 foo()')
    }
    exports.bar = function () {
    console.log('module3 bar()')
    }


  • 下载第三方模块uniq:打开左下角的Terminal,cd到02_CommonJS-Node路径,输入命令:npm install uniq --save



  • main.js

    //引用模块
    let module1 = require('./module1')
    let module2 = require('./module2')
    let module3 = require('./module3')
    let uniq = require('uniq')
    //使用模块
    module1.foo()
    module2()
    module3.foo()
    module3.bar()
    console.log(uniq([1, 3, 1, 4, 3]))



3. 下载 browserify



  • 全局安装browserify,命令: npm install browserify -g

    备注:若此步骤报错,请使用管理员身份打开webstorm,再次执行即可;或使用管理员身份打开cmd执行。


4. 执行处理命令



  • 第一步,cd到指定文件夹(03_CommonJS-Browserify)即:app.js所在的文件夹

  • 第二步,输入命令browserify js/src/main.js -o js/dist/bundle.js


5. 页面使用引入:




推荐阅读
  • 深入理解Java SE 8新特性:Lambda表达式与函数式编程
    本文作为‘Java SE 8新特性概览’系列的一部分,将详细探讨Lambda表达式。通过多种示例,我们将展示Lambda表达式的不同应用场景,并解释编译器如何处理这些表达式。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 本文介绍了如何在 Node.js 中使用流(Stream)进行数据读取与写入,包括创建可读流与可写流的基本方法,并提供了具体的代码示例。 ... [详细]
  • 本文探讨了Node.js后端开发的基础知识,包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • Node.js在服务器上的多种部署策略
    本文探讨了Node.js应用程序在服务器上部署的几种有效方法,包括使用Screen、PM2以及通过宝塔面板进行简易管理。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 如何从BAM文件绘制ATAC-seq插入片段长度分布图?
    在ATAC-seq数据处理中,插入片段长度的分布图是一个重要的质量控制指标,它能反映出核小体的周期性排列。本文将详细介绍如何从BAM文件中提取并绘制这些数据。 ... [详细]
  • 本文详细介绍了在Linux操作系统上安装和部署MySQL数据库的过程,包括必要的环境准备、安装步骤、配置优化及安全设置等内容。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • 本文详细探讨了在Web开发中常见的UTF-8编码问题及其解决方案,包括HTML页面、PHP脚本、MySQL数据库以及JavaScript和Flash应用中的乱码问题。 ... [详细]
  • 本文详细介绍了如何在 Node.js 环境中利用 Nodemailer 库实现邮件发送功能,包括环境配置、代码实现及常见问题解决方法。 ... [详细]
  • 本文介绍了编程语言的基本分类,包括机器语言、汇编语言和高级语言的特点及其优缺点。随后详细讲解了Python解释器的安装与配置方法,并探讨了Python变量的定义、使用及内存管理机制。 ... [详细]
author-avatar
稚气忖托气质_844
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有