标签: browserify

如今，ES7 模块几乎已在浏览器中得到普遍支持。这个问题的旧解决方案似乎涉及将 babel 与 Browserify 或 Webpack 结合使用。这仍然是对本地和 npm 模块使用 ES6 导入/导出语法的最简单且充分支持的方法吗？

编辑：是咆哮。蒸馏它。

我已经使用 browserify 来捆绑我的 js 文件。我收到表格错误

Uncaught TypeError: util.TextEncoder is not a constructor
    at Object.1.util (bundle.js:3)
    at o (bundle.js:1)
    at r (bundle.js:1)
    at bundle.js:1

这是我的bundle.js 的最初几行

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
var util = require('util');
var utf8 = new util.TextEncoder();

let secretDataTxt=document.querySelector(`#SecretData`);
let passwordTxt=document.querySelector(`#Password`);
let result=document.querySelector(`#Result`);

let encryptBtn=document.querySelector(`#encrypt`);

有人可以帮我解决这个错误吗？

编辑：这是一个工作示例

const util = require('util');
const utf8 = new util.TextEncoder();

console.log(utf8.encode("Hello"));

输出：Uint8Array(5) [ 72, 101, 108, …

希望在gulpjs构建期间"浏览化"的骨干视图文件中执行以下操作:

var template = require('../templates/pathToUncompiledTemplate');

问题似乎是这个Handlebars文件没有编译,因此不是JS文件.如果我首先将模板编译到tmp目录,则构建有效:

var template = require('../compiledtemplates/pathToACompiledTemplate');

随着流媒体构建和没有更多tmp文件的承诺,我希望有更多经验丰富的Browserify,Gulp或两者都能指出我正确的方向.具体来说,目标是在gulp任务期间编译模板,同时仍然使用引用原始模板文件的require语句,从而避免临时文件.可能？

可以弄清楚为什么会发生这种情况.来自ui.bootstrap的其他指令工作:alert,progressbar等等.但由于某种原因,弹出窗口和工具提示停止工作.有人有这个问题吗？之前我遇到过一个问题 - 由于某些原因,工具提示的默认css规则是opacity:0.但这次有点不同的问题.它甚至没有像过去那样向DOM添加工具提示相关的东西.

此外,我注意到一个视图的控制器,其中使用的工具提示我曾经可以访问类似的东西等tt_title, tt_isOpen, tt_placement.现在突然我不能再这样做了.

我怀疑与我们正在使用的browserify有关.我注意到工具提示不能在我的计算机上工作,而在我的同事身上他们仍然可以工作,然后他删除了bower文件和node_modules,清理了npm和bower缓存,工具提示和popovers也停止了为他工作.

我已经尝试ui.bootstrap.tooltip显式添加为模块依赖项,尽管我已经ui.bootstrap列出了.

如果有人有类似的问题,并且知道可能的解决方案,请帮助我.

在我的项目中,我使用Browserify(以编程方式使用gulp).在我的主要javascript文件中,我需要模块A和B. A也在使用B.在Browserify的输出中,我可以找到模块A的绝对路径.

输出如下所示:

!function t(n,o,r){function e(s,a){if(!o[s]){if(!n[s]){var u="function"==typeof require&&require;if(!a&&u)return u(s,!0);if(i)return i(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var f=o[s]={exports:{}};n[s][0].call(f.exports,function(t){var o=n[s][1][t];return e(o?o:t)},f,f.exports,t,n,o,r)}return o[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)e(r[s]);return e}({1:[…]
    …
10:[function(t,n){n.exports=t(9)},{"/Applications/MAMP/htdocs/Projects/xyz/node_modules/moduleA/node_modules/moduleB/index.js":9}]},{},[1]);

这是gulpfile.js的相关部分:

browserify(['./app/js/main.js'], {})
  .bundle()
  //Pass desired output filename to vinyl-source-stream
  .pipe(source('main.min.js'))
  //convert from streaming to buffered vinyl file object
  .pipe(buffer())
  // Start piping stream to tasks!
  .pipe(gulp.dest('app/js/'));

我怎么能避免这个？我已经尝试了几种Browserify选项,但它没有帮助.旁注:这两个模块是通过npm安装的,但是来自GitHub,因为它们没有在npm上发布.

目前,为了在文件夹中加载模块,我需要显式调用每个文件:

require('path/to/file/someFile.js')

有没有办法要求使用通配符在文件夹中的所有模块？就像是:

require('path/to/file/*.js')

lodash 仅支持具有功能/大小子集的自定义构建.创建自定义构建是一件轻而易举的事lodash-cli.

采用此自定义构建并将其集成到项目中的推荐方法是什么？(使用npm/browserify).

我是否创建了一个自定义构建命令来创建自定义构建并将其放置在某个位置？(哪里？)

是否有规范的方法来指定依赖项并集成到项目中？

我正在尝试使用browserify和babelify创建一个gulp任务.这是任务:

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('js', function () {
    browserify('./resources/js/*.js')
        .transform(babelify)
        .bundle()
        .pipe(source('*.js'))
        .pipe(gulp.dest('./public/js'));
});

我找到了一些示例代码,尝试使用它们,但结果总是一样的.

当我运行任务,并保存我的example.js文件时,会出现以下错误:

TypeError: browserify(...).transform is not a function

我究竟做错了什么？

在一个项目中,在开发过程中,我想

• 使用Babel监视并重新编译服务器端代码(因为我想在Parse上使用"ES6")
• 使用Browserify/Watchify观察并重新编译客户端代码

我怎样才能做到这一点？我可以编写2个监视任务,但是我必须打开2个终端窗口才能看到这两个目录.是否可以在1 gulp任务中执行此操作？像2个任务一样吗？

我知道对某些人来说这可能是一个愚蠢的问题，但是我是React的初学者，我希望创建一个非常简单的应用程序。我找到了一个示例，其中每个组件都保存在一个单独的js文件中，这对于模块化和重用来说非常好。

我现在唯一需要注意的是使用export / require。但是，我不需要依赖于nodejs。我只需要一个可以在任何便宜的Web服务器上运行的简单html / js应用程序。

我在某处阅读了可以使用“ Browserify”的内容，但看了之后，似乎就像一个节点库。

我是否可以从网页（例如通过CDN）使用任何允许我使用require的库？如果不是，那是否意味着我无法在不同文件中分离React组件？