Browserify模块和构建
RanxinStart 2021-08-25 ENV尘埃
# 大概介绍
- 浏览器端的前端打包工具
- 主要用于在浏览器中使用
npm包，最终会转换为commonJS (require)类似方式，在浏览器使用 - 方便模块细分，每个模块自成，通过
require引用其他模块 - 基于流
Stream - 旧时代产物，尽管也能勉强处理
css（CSS bundlers(opens new window)），html（brfs(opens new window)），但是不太友好，且年久失修
# Build And Config
安装
# 使用yarn安装
$ yarn add browserify -D
# 使用npm安装
$ npm i browserify --save-dev
# 模块化打包使用
# 1. 引入其他模块使用
其他模块文件 导出一个对象 含有foo方法
// > src/module.js
module.exports = {
foo() {
console.log('moudle foo()')
}
}
主文件入口
// main.js
const srcModule = require('./src/module') // 使用其他模块
srcModule.foo() //使用其他模块的方法
最后会打包到一个
js文件内
# 1.5 引入外部的模块
安装一个外部的模块
演示使用的是一个去重方法
uniq
$ yarn add uniq
直接引入使用
打包后依然可用
// main.js
const uniq = require('uniq') // 使用外部模块
console.log('uniq',uniq([1,1,2,2,3,4,1])) //使用外部模块的方法
# 2. 添加打包命令
-o是命令的形式>是cmd的形式，区别在于-o可以在没有创建目录自动创建目录，而>会报错
// package.json
{
"scripts": {
"build": "browserify ./index.js -o build.js",
"build1": "browserify ./index.js > build.js"
}
...
}
// 需要打包到指定文件夹
{
"scripts": {
"build": "browserify ./index.js -o dist/build.js",
"build1": "browserify ./index.js > dist/build.js"
}
...
}
执行命令进行打包
yarn build|npm run build
# 3. html使用打包后的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>build file test</title>
</head>
<body>
<script src="dist/build.js"></script>
</body>
</html>