browserify 使用

1、安装和生成：

npm install -g browserify
browserify main.js > bundle.js

2、解析：

browserify 可以让我们在前端引用npm 模块，或自定义的模块
使用require('XX')来引用npm 模块
用require('./XX.js')引用当前目录下自定义模块
一般会在main 或app js 里引用模块来实现入口js
编写完成后用以上二命令把main生成一个结果js
生成中会把所有require引用的模块都生成到结果js里。
browserify它实现了把模块转换并生成在一起。从而来使用，在页面可以引用
这样在页面里只需引用生成的js就可，不必引用多个script
当不需要引用某个js时，在main里注释掉然后生成就可以了。

node 模块编写：
exports.XX=fn();
require('XX').方法()

module.exports=fn();
require('XX')()

browserify 生成react

它可以把node 里的模块转成浏览器可以运行的，并打包生成一个js

当也可以把node react编写的代码打包生成。

但需要配置：

需要reactify 模块，

在package里配置：

"browserify": {
"transform": [
[
"reactify"
]
]
}

通过reactify把react 组件生成。

browserify XX.js > bundle.js

对于es6的支持。

https://github.com/babel/babelify

安装

npm install --save-dev babelify

npm install --save-dev babel-preset-es2015 babel-preset-react

运行

browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

对于react es6支持总配置：

"babelify": "^7.2.0",
"browserify": "^13.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"reactify": "^1.1.1",

"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react"
]
}
],
[
"reactify",
{}
]
]
},

在babelify 里的es2015 react是重点。

这样直接：browserify a.js > b.js就可以了。

js里就可以：

import React from 'react';
import ReactDOM from 'react-dom';

自动编译：

npm install watchify -g

用watchify a.js -o b.js

browserify 使用相关推荐

听说，当使用Reactjs的时候，Gulp和Browserify很配哦
在生产环境中如果依靠前端引用JSXTransformer.js文件来实现JSX向JavaScript的转换,那是绝对不靠谱的.所以,使用Reactjs的童鞋就需要使用更有逼格的方式来完成这项任务.作为 ...
前端构建工具的用法—grunt、gulp、browserify、webpack
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具--grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...
ES6新特性_使用babel对ES6模块化代码转换_使用browserify对代码进行打包_实现es6兼容其他浏览器--JavaScript_ECMAScript_ES6-ES11新特性工作笔记045
然后我们再来看一下, 我们一直在学ES6,但是,现在并不是,所有的浏览器对es6支持的都很好一般我们用chorme浏览器,支持的还不错. 那么怎么让所有的浏览器都支持我们用es6写的代码呢? 我们可 ...
Gulp browserify livereload
Gulp browserify livereload 之前在browserify那个博文中介绍了gulp + browserify 不过那个配置还不能满足日常需要搬运 https://github. ...
Gulp,grunt,seajs/require和browserify/webpack的区别
Gulp / Grunt 是构建工具,可以配合各种平台上的插件做js压缩,各种css编译,页面自动刷新,检查语法等,替代手工实现自动化开发 seajs/require和browserify/webpa ...
linux gulp 安装教程,linux – 安装gulp browserify始终给出错误
我试图用这个命令安装gulp-browserify: npm install gulp-browserify --save-dev 我已经成功安装了许多其他软件包 gulp-autoprefixer ...
browserify使用手册
简介这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用 ...
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法转自 http://www.jdon.com/idea/js/javascript-module-load ...
Vue.js——60分钟browserify项目模板快速入门
概述在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...
【browserify】一步步教你学会browserify
https://www.cnblogs.com/fsg6/p/13139627.html Browserify browserify的官网是http://browserify.org/,他的用途是将前 ...

browserify 使用

browserify 使用相关推荐

最新文章

热门文章