标签: browserify

在package.json:

"browser": {
        "ckeditor": "./public/ckeditor/ckeditor.js",
        "bootstrap": "./public/bootstrap/js/bootstrap.js"
      }

在源browserify coffee-script文件中:

$  = jQuery = require 'jquery-browserify'
ckeditor = require 'ckeditor'
jqueryCkeditor = require '../ckeditor/adapters/jquery.js'
$('#Info').ckeditor()

chrome浏览器控制台中的错误:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/config.js?t=E7KD
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/skins/moono/editor.css?t=E7KD
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/lang/en.js?t=E7KD
Uncaught TypeError: Cannot set property …

我想将bootstrap.js和jquery.js(都是用npm安装)组合到vendors.js文件中,但仍然可以通过调用来使用jquery require('$').所以我创建了gulp任务:

'use strict';

var gulp = require('gulp'), 
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');

gulp.task('bulld-frontend:vendors', function(done) {
 var build = browserify({
  entries: [
  'jquery',
  'bootstrap'
  ]
});

 build
 .transform(browserifyShim)
 .require('jquery')
 .bundle()
 .pipe(source('vendors.js'))
 .pipe(gulp.dest('build/public/js'))
 .pipe(plumber({
  errorHandler: helpers.logError
}));

 done();
});

然后将配置添加到package.json

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": "./gulp/utilities/shim-config.js",
}, 

最后在gulp/utilities/shim-config.js中配置我的垫片

'use strict';

module.exports = {
  'jquery'    :  '$',
  'bootstrap' :  { 'depends': { 'jquery': 'jQuery'} } …

后解编辑

这是一个Yeoman生成器,用于基础和Browserify建立一个项目:https://github.com/dougmacklin/generator-foundation-browserify

我正在试图找出如何正确地将基础框架 js与browserify捆绑在一起.

在我的项目文件夹中,我将它与jQuery一起安装(它依赖于它):

npm install jquery foundation-sites --save

然后在我的main.js我有以下内容:

var $ = jQuery = require('jquery');
var foundation = require('foundation-sites');
$(document).foundation();

我包括$ = jQuery = ...因为如果我不这样做我会收到jQuery is not defined错误.

但是,js组件不起作用.例如,警报元素无法正常关闭.

<div data-alert class="alert-box">
    <!-- close functionality not working -->
    <a href="#" class="close">&times;</a>
</div>

如果有帮助,这里是一个plunkr,包括我index.html,main.js,bundle.js,package.json和gulpfile.js.

我仍然在使用browserify,我应该使用browserify-shim,还是我做错了什么？

我试着在我的项目中重现这里报告的例子.问题是我使用的是似乎不支持ES6导入的Browseryfy.所以我想到翻译示例的第三个导入:

import {Treebeard} from 'react-treebeard';

至

var Treebeard = require('react-treebeard').default;

但它仍然不起作用,我得到以下错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined

我读过尝试切换到babelify,但我会认为这个选项是最后一个.谢谢!

我正在尝试为我的Karma测试添加代码覆盖率,但是虽然它找到了我正在测试的正确的JS文件,但它找不到这些文件中的函数.

从我到目前为止所读到的内容来看,我认为在传递给伊斯坦布尔进行报道之前,文件没有被正确浏览,但不可否认我是新手,所以我希望能提出一些建议.

这是我的JS文件(common.js):

var applicationSettings = require('./settings');

var common = {
    getAjaxBaseUrl: function () {
        var strVirtualDirectory = applicationSettings.VirtualDirectory;
        if (strVirtualDirectory.length > 1) {
            if (!strVirtualDirectory.startsWith("/")) {
                strVirtualDirectory = "/" + strVirtualDirectory;
            }
        }
    return strVirtualDirectory;
   }
}
module.exports = common;

这是我写的测试:

it('Client - Should get correct AjaxBaseUrl with /', function () {
    var clientSettings = require('./../client/scripts/settings');
    var clientCommon = require('./../client/scripts/common');

    clientSettings.VirtualDirectory = '/VD';
    expect(clientCommon.getAjaxBaseUrl()).to.equal('/VD');

});

it('Client - Should get correct AjaxBaseUrl without /', function () {
    var clientSettings = …

我得到这个奇怪的错误作为标题.完整的消息看起来像这样

$ gulp browserify [01:21:03]使用gulpfile F:\ CSC Assignments\FinalProject\HotelProject\gulpfile.js [01:21:03]开始'browserify'... [01:21:03]'browserify'错误15 ms之后[01:21:03] ReferenceError:Gulp没有定义source.(F:\ CSC Assignments\FinalProject\HotelProject\gulpfile.js:109:15)在module.exports(F:\ CSC Assignments\FinalProject\HotelProject \node_modules\gulp \node_modules\orchestrator\lib\runTask.js:34: 7)在Gulp.Orchestrator._runTtep(F:\ CSC Assignments\__ HotelProject \node_modules\gulp \node_modules\orchestrator\index.js:214:10)在Gulp.Orchestrator.start(F:\ CSC Assignments\FinalProject\HotelProject \node_modules\gulp \node_modules\orchestrator\index.js:134:8) )在C:\ Users\LUCKYLAM\AppData\Roaming \npm \node_modules\gulp\bin\gulp.js:129:20 at process._tickCallback(node.js:355:11)at Function.Module.runMain(module. js:503:11)在node.js:814:3启动时(node.js:129:16)

我是新手,在花了几个小时搞清楚造成问题的原因后,我不知道这里有什么问题.请帮忙.

这是我的/app/js/script.js

require('angular');

var app = angular.module('app', []);

gulpfile.js:

gulp.task('browserify', function() {
    return browserify('./app/js/script.js')
        .bundle()
        .pipe(source('main.js'))

        // saves it the public/js/ directory
        .pipe(gulp.dest('./dist/js/kk/'));
});

我的文件夹结构

我已经设置Elixir使用Vueify和热重载插件.一切都编译好,但我的编译文件出现控制台错误,Vue组件似乎没有转换为html,它仍然显示<app></app>标签.如果我从elixir中删除热重新加载插件,页面呈现正常.

错误是:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

控制台输出它

[HMR] Attempting websocket connection to http://localhost:3123
app.js:10904 Uncaught TypeError: Cannot read property 'indexOf' of undefined
[vue-devtools] Ready. Detected Vue v1.0.26
[HMR] Websocket connection successful.
[HMR] Updated modules ["resources/assets/js/embeds/html/app.vue"]

所以值得一提的是,它正在接收来自热重新加载的消息,它只是因为这个错误而不呈现页面.错误发生在编译app.js文件中的以下行中.

// compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
    initHookName = 'init'
  }

这是我的文件

gulpfile.js

var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
require('laravel-elixir-vueify');

if (gutil.env._.indexOf('watch') > -1) {
    //  Add the browserify HMR plugin …

我尝试使用gulp和browserify构建我的react项目。但是每次我尝试构建捆绑软件时，都会出现此错误：

[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js
[16:19:54] Starting 'build'...
[16:19:54] 'build' errored after 36 ms
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function
    at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6)
    at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8)
    at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623
    var written = dest.write(chunk);
                       ^

TypeError: dest.write is not a function
    at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10) …

我正在尝试导入PapaParse并在控制器中使用它.这是我到目前为止所尝试的:

import Papa from 'papaparse';
//import 'papaparse'; (tried it like this also)

angular.module('app').constant('Papa', window.Papa);

我认为这是正确的方法,但是window.Papa已经是未定义的.我究竟做错了什么？

我有代表的文件：

-js/
    - calc.js
    - tool.js
-index.html

calc.js是具有以下结构的节点模块：

module.exports = {
   calculate: function() {...},
   getPrecision: function() {...}
}

和tool.js使用require并添加了一些功能，例如：

const fpcalc = require('./fpcalc');

function changeState() {
//some code using fpcalc
}

我使用Browserify生成bundle.js并将其添加为脚本src。我在HTML页面上的按钮之一是使用onclick=changeState()。单击后，我得到

ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick

这是为什么？还有其他方法可以使它起作用吗？