CommonJS

2019-03-14  本文已影响0人  fb941c99409d

commonJS 是 node端的引入模块方案

浏览器端实现commonJS步骤

开发环境使用commonjs编码, 然后使用Browserify对文件进行编译(生成require函数,然后合并资源文件为一个js),使其可以在浏览器运行

## Browserify模块化使用教程
1. 创建项目结构
  |-js
    |-dist //打包生成文件的目录
    |-src //源码所在的目录
      |-module1.js
      |-module2.js
      |-module3.js
      |-app.js //应用主源文件
  |-index.html
  |-package.json // 可以用 npm init初始化项目生成package.json
    {
      "name": "browserify-test",
      "version": "1.0.0"
    }
2. 下载browserify 必须全局和局部都安装
  * 全局: npm install browserify -g
  * 局部: npm install browserify --save-dev
3. 定义模块代码
  * module1.js
  * module2.js
  * module3.js

  * app.js (应用的主js)
    //引用模块
    let module1 = require('./module1')
    let module2 = require('./module2')
    let module3 = require('./module3')
    //使用模块
    module1.foo()
    module2()
    module3.foo()
    module3.bar()
* 打包处理js:
  * browserify js/src/app.js -o"代表out的意思" js/dist/bundle.js
* 页面使用引入:
  <script type="text/javascript" src="js/dist/bundle.js"></script> 
上一篇 下一篇

猜你喜欢

热点阅读