展开

关键词

前端模块化工具 Browserify

Browserify 是什么 Browserify 是一个浏览器端代码模块化的工具为什么要使用 Browserify 浏览器端的代码模块化有2个明显的好处: 1)前端JS可以使用npm包 我们知道 npm 工作原理 开发时使用nodejs的模式,正常使用 require 和 module.exports,在部署前使用 Browserify 进行编译 Browserify 会对代码进行解析,整理出代码中的所有模块依赖关系 = require(uniq);var nums = ;console.log(uniq(nums)); 执行测试 $ node main.js 输出 使用 Browserify 编译打包 $ browserify Debug Browserify 打包出来的是混合代码,不利于查看 例如 ?? 比我们原始的 test.js 复杂很多,所以 Browserify 提供了 debug 模式,可以让我们在开发阶段使用 编译打包时加上 debug 选项 $ browserify test.js > bundle.js

1.1K40

使用npm+gulp+browserify网页前端开发

抽时间梳理了一下npm+gulp+browserify的组合,感觉还不错。npm来管理CMD类库的依赖,browserify来进行CMD到AMD的转换,gulp来管理browserify进行自动构建。 安装browserify如果单独使用browserify,应该安装在全局。 管他呢,browserify知道就行了。 browserify转换browserify srcmainnodejsindex.js -o srcmainwebappjsindex.js测试cd srcmainwebapphttp-server注意 = require(browserify);var es = require(event-stream); gulp.task(browserify, function(){ 定义多个入口文件 var

32730
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue.js——60分钟browserify项目模板快速入门

    在git bash下输入以下命令:vue init browserify-simple my-browserify-simple-demobrowserify-simple是项目模板的名称,my-browserify-simple-demo browserify的编译是比较缓慢的,当一个browserify项目开始变大时,编译打包的时间会变得较长。 使用vue-browserify模板simple-browserify 模板用于构筑基于browserify和vueify的开发环境,browserify模板则提供了更多内容: 提供了ESLint:用于格式化 1.生成项目重新打开一个git bash窗口,执行以下命令:vue init browserify my-browserify-demo browserify是项目模板,my-browserify-demo vue-browserify-simple示例介绍完了这两种模板,我们就来做个小示例吧,下面这个示例使用的是vue-browserify-simple模板。

    23520

    Gulp 快速入门gulp API 文档

    package.json{ devDependencies: { gulp: ^3.9.1, gulp-browserify: ^0.5.1, gulp-jade: ^1.1.0 }}gulpfile.jsvar gulp = require(gulp), jade = require(gulp-jade), browserify = require(gulp-browserify) gulp.task(jade pipe(gulp.dest(buildsdevelopment))}) gulp.task(js, function () { return gulp.src(srcjsmain.js) .pipe(browserify function (s) { if (console) { console.log(s) } }}main.jsvar logger = require(.logger)logger.log(Hello, Browserify

    11620

    Node.js Stream - 实战篇

    下面提供一个修改Browserify管道的函数。 = require(browserify)var b = browserify(opts) 应用插件b.plugin(log)b.bundle().pipe(fs.createWriteStream( 类似于Browserify提供的模块定义(用row表示),vinyl-fs也提供了文件定义(vinyl对象)。 如果与Browserify的管道对比,可以发现Browserify是确定了一条具有完整功能的管道,而Gulp本身只提供了创建vinyl流和将vinyl流写入磁盘的工具,管道中间经历什么全由用户决定。 两种模式比较Browserify与Gulp都借助管道的概念来实现插件机制。Browserify定义了模块的数据结构,提供了默认的管道以处理这样的数据流,而插件可用来修改管道结构,以定制处理行为。

    54351

    前端工程化篇之 Gulp

    eslint = require(gulp-eslint); eslint的包 语法检查 const babel = require(gulp-babel); 编译ES语法的babel包 const browserify = require(gulp-browserify); 编译commonJs语法的工具const rename = require(gulp-rename); 重命名文件的包const less = 官网有误 })) 输出出去 .pipe(gulp.dest(buildjs)) .pipe(livereload())); 将commonjs的模块化语法转换成浏览器能识别语法gulp.task(browserify , function() { 只要放入口文件 return gulp.src(buildjsapp.js) .pipe(browserify()) 重命名文件 .pipe(rename(built.js 速度慢gulp.task(js-prod, gulp.series(js-dev, uglify)); gulp.task(default, gulp.parallel(eslint, babel, browserify

    32410

    nodejs模块导出变成浏览器可使用的js(sm4浏览器端js实现过程)

    下面教方法:一、安装Browserify 工具npm install -g browserify二、安装完成后可以使用命令:browserify下面举例使用nodejs实现的国密sm4算法,变成一个浏览器端可以使用的 sm4npm install gm-crypt 写一个使用脚本t.js,内容如下const SM4 = require(gm-crypt).sm4;console.log(SM4); 然后执行命令生成js脚本browserify

    1.3K40

    前端模块管理器简介

    Browserify?Browserify本身不是模块管理器,只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它,我们可以使用Node.js的npm模块管理器。 首先,安装Browserify。  $ npm install -g browserify然后,编写一个服务器端脚本。   这时,Browserify就登场了,将上面代码编译为浏览器脚本。  $ browserify robot.js > bundle.js生成的bundle.js可以直接插入网页。   Browserify编译的时候,会将脚本所依赖的模块一起编译进去。这意味着,它可以将多个模块合并成一个文件。Component? Duo是在Component的基础上开发的,语法和配置文件基本通用,并且借鉴了Browserify和Go语言的一些特点,相当地强大和好用。首先,安装Duo。

    44380

    几个常见的前端模块管理器

    Browserify?Browserify本身不是模块管理器,只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它,我们可以使用Node.js的npm模块管理器。 首先,安装Browserify。  $ npm install -g browserify然后,编写一个服务器端脚本。   这时,Browserify就登场了,将上面代码编译为浏览器脚本。  $ browserify robot.js > bundle.js生成的bundle.js可以直接插入网页。   Browserify编译的时候,会将脚本所依赖的模块一起编译进去。这意味着,它可以将多个模块合并成一个文件。Component? Duo是在Component的基础上开发的,语法和配置文件基本通用,并且借鉴了Browserify和Go语言的一些特点,相当地强大和好用。首先,安装Duo。

    22130

    gulp替换webpack

    之前就听说过gulp+browserify的组合,这次就尝试使用这个东东重写编译脚本。话不多说,直接上最后的成果。 前端编译js时使用了gulp、babel、browserify、babelify,编译css时使用了less,使用gulp-connect作为开发服务器。 gulp编译脚本gulpfile.jsconst gulp = require(gulp);const browserify = require(browserify);const errorify = function(){ return uglify({mangle: {except: }}); }; pageNames.forEach(function(pageName) { 在这里添加自定义 browserify env.production, plugin: }; let opts = _.assign({}, watchify.args, customOpts); let b = browserify(opts

    48740

    javascript规范(js)

    file.js); require返回对象 objectexports.doStuff = function() {};module.exports = someValue;浏览器不兼容nodejs,需要通过browserify 工具转换为浏览器支持js (例如:browserify main.js > compiled.js): 浏览器不兼容nodejs的几个模块moduleexportsrequireglobalAMD(异步加载模块 module){ AMD a.dosomething(); b.dosomething();});js模块化方案seajs、requirejs(在线编译,amd和cmd编译器在浏览器中) webpack、browserify

    35830

    理解CSS模块化

    它可以看成是webpack或 Browserify的一个插件。 入门如前面所说的,你需要有webpack或者Browserify来实现CSS模块化。Webpack先从webpack版本的模块化开始。 Browserify我只在命令行中用过Browserify,所以我猜使用起来会更复杂一些。 Browserify运行srcindex.js,返回distindex.js,并且使用 css-modulesify将样式表编译至distmain.css。 总结从今天看来,CSS模块化系统和生态确实有些原始了,从Browserify中的配置就能看出来。

    19740

    为何webpack风靡全球?三大主流模块打包工具对比

    browserify 可以通过各种transform 插件实现不同类型资源的引入与打包。在webpack 中,与browserify 的transform 相对应的是loader,但是功能更加丰富。 通过browserify –help 及browserify –help advanced 可以查看所有的配置项,覆盖了从输入输出位置、格式到使用插件等各个方面。 browserify 同样支持直接调用其Node.js 的API。 var requirejs = require(‘requirejs’);var browserify = require(‘browserify’);var b = browserify();b.add browserify 也支持了模块热替换这一特性。

    72180

    为ES6配置JavaScript测试工具

    Browserify用户需要安装babelify transform库。该库允许Browserify在构建过程中使用Babel对代码进行转译。 在浏览器环境中,你需要使用Webpack或是Browserify编译所有测试文件。 Browserify: browserify test***.js -o tests-bundle.jsWebpack: webpack test***.js tests-bundle.js上面的命令会把 Browserify: browserify test***.js -o tests-bundle.jsWebpack: webpack test***.js tests-bundle.jsKarma在使用 Browserify: 要在browserify中开启source maps,需要使用-d参数。

    65420

    vue小技巧

    vue create 和 vue init的区别vue init 可以根据模版创建项目 ,可供选择的模版有 browserify browserify-simple simple webpack webpack-simple

    14630

    浏览器加载 CommonJS 模块的原理与实现

    二、Browserify 的实现知道了原理,就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。?请看一个例子,main.js 模块加载 foo.js 模块。 $ browserify main.js > compiled.jsBrowserify到底做了什么?安装一下browser-unpack,就能看清楚了。 三、Tiny Browser Require虽然 Browserify 很强大,但不能在浏览器里操作,有时就很不方便。

    48780

    浏览器加载 CommonJS 模块的原理与实现

    二、Browserify 的实现知道了原理,就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。?请看一个例子,main.js 模块加载 foo.js 模块。 $ browserify main.js > compiled.jsBrowserify到底做了什么?安装一下browser-unpack,就能看清楚了。 三、Tiny Browser Require虽然 Browserify 很强大,但不能在浏览器里操作,有时就很不方便。

    31020

    (Vue全家桶)Vue-cli

    browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。 browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。simple-一个最简单的单页应用模板。

    53030

    从零开始构建你的 Gulp

    => { return gulp.src(config.src) .pipe(jshint()) .pipe(jshint.reporter(stylish))})config.js运行结果通过引入 browserify 插件,使得我们可以在浏览器中加载 Node.js 模块,而 watchify 插件可以加速 browserify 的编译,而 vinyl-source-stream 把普通的 Node Stream Modernizr 的非 CommonJS 文件 script.jsconst gulp = require(gulp), browsersync = require(browser-sync), browserify = require(browserify), source = require(vinyl-source-stream), watchify = require(watchify), bundleLogger = require(browserify), source = require(vinyl-source-stream), config = require(....config).babel; gulp.task

    23240

    前端模块化详解(完整版)

    全局: npm install browserify -g局部: npm install browserify --save-dev③定义模块代码(同服务器端)注意: index.html文件要运行在浏览器上 ,需要借助browserify将 app.js文件打包编译,如果直接在 index.html引入 app.js就会报错! ④打包处理js根目录下运行 browserify jssrcapp.js-o jsdistbundle.js⑤页面使用引入在index.html文件中引入 2.AMDCommonJS规范加载模块是同步的 (3) ES6-Babel-Browserify使用教程简单来说就一句话:使用Babel将ES6编译为ES5代码,使用Browserify编译打包js。 编译js : browserify jslibapp.js-o jslibbundle.js然后在index.html文件中引入 最后得到如下结果:?

    46930

    相关产品

    • 人工智能

      人工智能

      提供全球领先的人脸识别、文字识别、图像识别、语音技术、NLP、人工智能服务平台等多项人工智能技术。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券