热门标签 | 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. 页面使用引入:




推荐阅读
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社区 版权所有