标签: browserify

以下是代码示例：

测试.js：

function print(t){
    console.log(t);
}

索引.js：

var test = require('./test.js');
test.print("ok");

我收到一个test.show is not a function错误，并且我不确定为什么如果其他 npm 模块似乎可以工作，它就无法工作。我正在使用 browserify 使要求在浏览器中工作。

要求非来自模块的文件在 npm 中如何工作？

我用react.js 和jsx 创建了一个模块。我将 lodash 作为唯一的外部库。我使用 Grunt 和 Browserify 编译的文件大小为 1.1mb，缩小后几乎为 500kb。这怎么可能？如何减少文件大小？

我的咕噜文件

module.exports = {
    dist: {
        options: {
            debug: true,
            transform: [require('grunt-react').browserify]
        },
        src: [ 'src/js/app.js' ],
        dest: 'dist/app.js'
    }
};

作为JS单元测试和Angular测试的新手,我尝试用Jasmine和Karma编写自己的测试.在尝试编写自己的测试失败后,我决定退后一步检查一切是否正常工作,所以我将示例控制器及其测试从Angular Documentation on Unit测试复制到我的项目中,我甚至无法得到工作..我觉得自己像一个完全白痴,甚至无法让复制粘贴的代码工作..

所以这是我在step1Ctrl.js文件中初始化的控制器:

模块在另一个文件中初始化.

var mainApp = angular.module("mainApp");

mainApp.controller('PasswordController', function PasswordController($scope) {   $scope.password = '';   $scope.grade = function() {
    var size = $scope.password.length;
    if (size > 8) {
      $scope.strength = 'strong';
    } else if (size > 3) {
      $scope.strength = 'medium';
    } else {
      $scope.strength = 'weak';
    }   }; });

以下是居住在里面的测试step1Ctrl.spec.js:

describe('PasswordController', function() {
  beforeEach(module('mainApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching …

嗨,这个问题让我很难过.

我想知道,在从TS编译并使用Browserify后,我可以将我的SourceMaps(来自gulp-sourcemaps)一直指向我的TS文件.

目前我有它工作,所以我使用tsify编译TS然后我将它全部捆绑到一个all.js然后uglify(minify)它到一个all.min.js. 我也有SourceMaps但只能从缩小版本映射到all.js.

我已经搜索了很多.之前我已经完成了SourceMaps,从JS缩小到我的TS,但在那种情况下我没有使用Browserify.

我目前的工作Gulp任务:

gulp.task('scripts', function(){
    return browserify(paths.mainJs)
        .plugin(tsify)
        .bundle()
        .on('error',console.error.bind(console))
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

请注意,这里的一个重要问题是源映射调用之间的所有内容都需要支持gulp-sourcemaps,而Browserify不支持.Gulp也有一个Typescript编译器,但是我如何使用Browserify？

谢谢!

这是一个路障。我究竟做错了什么？

....
/// <reference path="../../../typings/tsd.d.ts" />
var slider:HTMLElement = document.getElementById('slider');

noUiSlider.create(slider, {
    start: +$input.val(),
    step: +$input.prop('step'),
    behaviour: 'tap',
    range: {
        'min': +$input.prop('min'),
        'max': +$input.prop('max')
    },
    format: wNumb({
        decimals: 0,
        thousand: ','
    })
});

// this barfs in TS — error in as title of this post
slider.noUiSlider.on('update', (values, handle) => {
    $input.val(values[0]);
});

// this does too.
<HTMLElement>slider.noUiSlider.on('update', (values, handle) => {
    $input.val(values[0]);
});

我的TSD文件包含从https://github.com/retyped/nouislider-tsd-ambient/blob/master/nouislider.d.ts输入的nouislider。

错误详情：

{ [TypeScript error: resources/assets/typescript/common.ts(44,25): Error TS2339: Property 'noUiSlider' does not exist on …

尝试重用 Graph.vue 文件中的自定义模板，但此尝试失败（控制台中没有任何错误）。我只渲染了一张图表（红色的）。有什么想法如何修复此代码吗？

我当前的代码如下所示：

main.js

import Vue from 'vue';
import Graph from './components/Graph.vue';

new Vue({
    el: 'graph',
    components: { Graph }
});

图.vue

<template>
    <canvas height="400" width="600"></canvas>
</template>

<script>
    import Chart from 'chart.js';

    export default {
        props: ['labels', 'values', 'color'],
        props: {
            labels: {},
            values: {},
            color: {
                default: 'rgba(220,220,220,0.2)'
            }
        },
        mounted(){
            var data = {
                labels: this.labels,
                datasets: [
                    {
                        label: "My First dataset",
                        fill: true,
                        lineTension: 0.1,
                        backgroundColor: this.color,
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0, …

我在使用Wavesurfer的web项目上遇到了障碍.我在我的项目中安装了wavesurfer.js和react-wavesurfer作为节点模块.Wavesurfer.js似乎工作正常,但反应波浪似乎遇到了我发现难以调试的问题.以下代码:

import React from "react";
import WaveSurfer from "wavesurfer.js"
import ReactWavesurfer from "react-wavesurfer";

class Waveform extends React.Component {
  makeWave() {
    var wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'red',
      progressColor: 'purple'
    });
    wavesurfer.load('path/to/mp3');
  };


  render() {
    this.makeWave();
    return (
      <div>
        <ReactWavesurfer
          audioFile={'path/to/mp3'}
        />
      </div>
    );
  }
}

export default Waveform;

仅生成调用this.makeWave()的第一个波形.尝试创建React波形时返回错误:Uncaught TypeError: this._wavesurfer.init is not a function.我使用browserify来捆绑我的javascript依赖项.

任何帮助将非常感激!

这个问题与我之前的问题有关。

尝试在控制器中使用 howler.js ( https://github.com/goldfire/howler.js#documentation )。

Howler 没有插件，但它作为 npm 包存在。

我已按照说明使用 ember-browserify，然后启动了 ember 开发服务器 ( ember s)。

导入如下所示：

import Howl from "npm:howler";

我也试过这个：

import {Howl as Howl} from "npm:howler" ;

和这个 ：

import {Howl} from "npm:howler" ;

在所有情况下，当我尝试像这样使用 Howler 时：

var sound = new Howl({
    src: ['https://example.com/foo.mp3']
});
sound.play();

我在控制台中收到错误消息（如上所示的第一次导入）：

Uncaught TypeError: _npmHowler.default is not a constructor

或（如上所示的第二个和第三个导入）：

Uncaught TypeError: _npmHowler.Howl is not a constructor

Howler 的示例代码在这里，据我所知，我所做的与这些示例一致。

欢迎任何建议。

FWIW：这是与这里提到的相同的代码体，但自从那个问题我已经开始使用ember-browserify

编辑：这个问题已被标记为“可能重复” …

所以我使用browserify来管理我正在处理的项目的模块.

每个文件都包含以下内容:

module.exports = function(){
  // class constructor
}

然后在我的main.js文件中,我创建了这样的新对象:

var Foo = require('./foo.js');
var foo = new Foo();

问题是,我不知道如何在此设置中使用原型继承.通常,如果我希望类Foo从类Bar继承,我会做这样的事情:

Foo.prototype = new Bar();
Foo.prototype.constructor = Foo;

Foo = function(){
    Bar.call(this)
}

我将如何使用browserify执行这些操作？我以为我会用module.export替换所有的Foos,但是我试图继承一些来自easeljs的东西而且它只是不起作用.它说'this'没有在容器的初始化器中定义.

提前致谢!

我的应用程序可以在localhost上正常运行，但是一旦上载，我会不断收到“ socket.io/?EIO=3&transport=polling&t=Lvm1SGO”404错误，该错误始终在控制台中列出。抱歉，如果这是一个愚蠢的问题，但是我对socket.io还是很陌生。您可以在此处检查并查看操作中的错误：http: //95.211.186.223/projects/webrtc/work/P2PImage/

我的client.js文件：

// this file is meant to be browserified
var P2P = require("socket.io-p2p");
var io = require("socket.io-client");
var ss = require("socket.io-stream");
var socket = io();
var opts = {autoUpgrade: true, peerOpts: {numClients: 10}};
var p2p = new P2P(socket, opts);
var $ = require("jquery");

p2p.on("peer-num", function(num) {
  console.log("You are peer number " + num);
  $(".peerNum").html( "Number " + num );
});

p2p.on("file", function(stream) {
  //console.log(stream);

  var img = document.createElement("img");
  img.src = (window.URL || window.webkitURL).createObjectURL(new Blob(stream));
  document.getElementById("receivedImages").appendChild(img);
});

$(function() …