Browserify模块化使用教程
Posted chenyanlong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
-
-
定义模块代码
-
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()‘)
} -
app.js (应用的主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]))
-
-
打包处理js:
-
browserify js/src/app.js -o js/dist/bundle.js
-
-
页面使用引入:
以上是关于Browserify模块化使用教程的主要内容,如果未能解决你的问题,请参考以下文章