Browserify了解
2020-03-16 本文已影响0人
平安喜乐698
目录
1. 通过一个小练习来了解browserify
白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。
本文为本人略读官网文档后的大略笔记，实在不适合他人阅读
前言
一个JavaScript程序的静态模块打包器（将css、img、js等文件打包成一个单独的js文件）
browserify可以让我们使用nodejs中常用到的require, module.exports等功能
安装
npm install -g browserify
1. 通过一个小练习来了解browserify
第一步：创建hello.js文件
module.exports = 'Hello World！';
第二步：创建main.js
var msg = require('./hello.js');
console.log("logInfo:", msg);
第三步：browserify打包
browserify main.js -o bundle.js
第四步：创建index.html（使用bundle.js）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script> <!--引入打包后的js文件-->
</body>
</html>
运行效果
使用jquery
安装
npm i --save jquery
修改hello.js
module.exports = function(){
var $ = require('jquery');
$(function(){
$("body").html("<h1>Hello World!</h1> jquery version: " + $.fn.jquery);
})
};
修改main.js
var hello = require('./hello.js')
hello();
重新打包
browserify main.js -o bundle.js
运行效果
2. Glup
- 创建npm说明文件 package.json
npm init
填写 项目的名称、描述、作者等信息 ( 输入完成一项后回车输入下一项 )
注意：
1. 项目名必须全小写
生成的package.json文件
{
"name": "ee",
"version": "1.0.0",
"description": "hello",
"main": "main.js",
"scripts": {
"test": "testTT"
},
"author": "cx",
"license": "ISC"
}
注意：
1. JSON文件不支持注释
- 安装
npm install --g gulp
npm i --save-dev gulp gulp-rename gulp-browserify
# require('./hello.html')
npm i --save-dev stringify
- gulpfile.js 配置文件
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var stringify = require('stringify');
gulp.task('build', ['lint'], function(){
return gulp.src('./main.js')
.pipe(browserify({
transform: [
stringify(['.html']),
],
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['build'], function(){
return gulp.watch(['./*.js', '!./bundle.js'], ['build']);
});
创建hello.html
<!-- hello.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<h1>Hello World!</h1>
<span style="color:blue">你好</span>
</body>
</html>
修改hello.js
module.exports = function(){
var $ = require('jquery');
$(function(){
$("body").html(require('./hello.html'));
})
};
代码检查工具 jshint
创建 .jshintrc文件
{
"noempty": true,
"nonbsp": true,
"nonew": true,
"undef": true,
"unused": true,
"trailing": true,
"maxlen": 120,
"asi": true,
"esnext": true,
"laxcomma": true,
"laxbreak": true,
"node": true,
"globals": {
"describe": false,
"it": false,
"before": false,
"beforeEach": false,
"after": false,
"afterEach": false,
"Promise": true
}
}
安装依赖
npm i --save-dev gulp-jshint jshint jshint-stylish
gulpfile.js 配置文件修改
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var jshint = require('gulp-jshint');
gulp.task('build', ['lint'], function(){
return gulp.src('./main.js')
.pipe(browserify({
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'));
});
gulp.task('lint', ['jshint']);
gulp.task('jshint', function(){
return gulp.src(['./*.js', '!./bundle.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
})
gulp.task('default', ['build'], function(){
return gulp.watch(['./*.js', '!./bundle.js'], ['build']);
})
