3_CommonJS-Browserify模块化教程

Posted 全情海洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了3_CommonJS-Browserify模块化教程相关的知识,希望对你有一定的参考价值。

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

<script type="text/javascript" src="js/dist/bundle.js"></script> 

以上是关于3_CommonJS-Browserify模块化教程的主要内容,如果未能解决你的问题,请参考以下文章

如何教你用python 3 写简单的登录模块

模型推理教你用 C++ 实现一般模型推理图片预处理模块

陈松松:视频引流高手教你3招让客户主动找上门

手把手教你做JavaWeb项目:登录模块

手把手教你在Centos7上安装zabbix server 3.0

东方耀 手把手教React Native实战开发视频教程+源码笔记全集