CommomJS使用介绍_web前端培训

使用

（1）服务端使用

①下载安装node.js

②创建项目结构

注意：用npm init 自动生成package.json时，package name(包名)不能有中文和大写

|-modules
  |-module1.js
  |-module2.js
  |-module3.js
|-app.js
|-package.json
  {
    “name”: “commonJS-node”,
    “version”: “1.0.0”
  }

③下载第三方模块

npm install uniq –save // 用于数组去重

④定义模块代码

//module1.js
module.exports = {
  msg: ‘module1’,
  foo() {
    console.log(this.msg)
  }
}
​
//module2.js
module.exports = function() {
  console.log(‘module2’)
}
​
//module3.js
exports.foo = function() {
  console.log(‘foo() module3’)
}
exports.arr = [1, 2, 3, 3, 2]
​
// app.js文件
// 引入第三方库，应该放置在最前面
let uniq = require(‘uniq’)
let module1 = require(‘./modules/module1’)
let module2 = require(‘./modules/module2’)
let module3 = require(‘./modules/module3’)
​
module1.foo() //module1
module2() //module2
module3.foo() //foo() module3
console.log(uniq(module3.arr)) //[ 1, 2, 3 ]
​

⑤通过node运行app.js

命令行输入node app.js，运行JS文件

（2）浏览器端使用

需要借助Browserify

①创建项目结构

|-js
  |-dist //打包生成文件的目录
  |-src //源码所在的目录
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js //应用主源文件
|-index.html //运行于浏览器上
|-package.json
  {
    “name”: “browserify-test”,
    “version”: “1.0.0”
  }

②下载browserify

全局: npm install browserify -g

局部: npm install browserify –save-dev

③定义模块代码(同服务器端)

注意：index.html文件要运行在浏览器上，需要借助browserify将app.js文件打包编译，如果直接在index.html引入app.js就会报错！

④打包处理js

根目录下运行browserify js/src/app.js -o js/dist/bundle.js

⑤页面使用引入

在index.html文件中引入

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。