标签: browserify

我可以从 package.json 运行此命令 node.js 吗？

"browserify file.js -o bundle.js" 

如果我可以，我该如何做到这一点以及如何在不使用命令提示符的情况下执行它？

我有以下gulp任务(包括我所要求的所有要求):

const gulp = require("gulp");
const browserify = require("browserify");
const tsify = require("tsify");
const sass = require('gulp-sass');
const fs = require('fs');
const uglify = require('gulp-uglify');
const tslint = require('gulp-tslint');
const gutil = require('gulp-util');
const babelify = require("babelify");

gulp.task('js', function () {
    return browserify({
        entries: paths.ts + 'App/start.ts',
        debug: true
    }).plugin("tsify")
        .transform(babelify.configure({
            presets: ["es2015"]
        }))
        .bundle()
        .on('error', swallowError)
        .pipe(fs.createWriteStream(jsOutput + "app.js"));
});

包含package.json中包含的所有必需模块,包括babel-preset-es2015.然而,babelify变换根本没有做任何事情,只要我可以将"es2015"改为任何东西,我得到完全相同的结果(es6输出).

我已经尝试使用指定预设的.babelrc文件,以及指定babelify转换的几种不同方式,包括添加.ts文件扩展名.

我的tsconfig.json有以下内容:

"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false, …

我创建了以下NodeJs模块：

import $ from 'jquery';

module.exports = () => {

  $("#clients-table tbody tr").click(() => {

    let $this = $(this);

    console.log($this);
    console.log($(this));
    console.log($(this).attr("class"));
    console.log($("#clients-table tbody tr").attr("class"));
    console.log("end");
  });
}

我的Browserify入口点如下所示：

"use strict";

import $ from 'jquery';
import test from './test';

test();

当我点击元素时，点击事件被触发，但是$(this)是undefined. 这是不同的结果console.logs：

test.js:9 he.fn.init {}
test.js:10 he.fn.init {}
test.js:11 undefined
test.js:12 test
test.js:13 end

知道为什么吗？

我有一些代码在浏览器中不起作用，除非我“忽略”两个包，我可以用 browserify: 做到这一点browserify files.js -i fs-extra -i request --standalone files > files.browserify.js，结果代码可以正常工作，但是如果我尝试用 webpack 来做，代码会抱怨模块被丢失的。

...
  plugins: [
      new webpack.IgnorePlugin(/fs-extra$/),
      new webpack.IgnorePlugin(/request$/),
      new webpack.IgnorePlugin(/fs$/)
  ],
...

test.webpack.js:7655 Uncaught Error: Cannot find module "request"
    at webpackMissingModule (test.webpack.js:7655)
    at Object.exports.byteLength (test.webpack.js:7655)
    at __webpack_require__ (test.webpack.js:20)
    at Object.<anonymous> (test.webpack.js:17012)
    at __webpack_require__ (test.webpack.js:20)
    at test.webpack.js:66
    at test.webpack.js:69

我怀疑可能的WebPack不会创建一个“空存根”像browserify作用：--ignore, -i Replace a file with an empty stub. Files can be globs.。

我能做些什么来解决这个问题？

资源

• https://webpack.github.io/docs/webpack-for-browserify-users.html#ignore
• https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin

我花了几天时间在互联网上搜索并寻找解决此问题的方法（请不要将其标记为重复！）。我正在尝试使用 ES6 导入：

import * as _ from 'underscore'         <--- works
const test = _.clone({'2':1});          <--- works

import Bulma from '@vizuaalog/bulmajs'; <--- fails

我的 gulp 任务无法在“从 bulmajs 导入”行编译；我得到了可怕的“ParseError：'import'和'export'可能只出现在'sourceType：module'中”:(

这是 gulp 任务：

browserify(./src/js/index.js', {debug: true})
        .transform(babelify.configure())
        .bundle().on('error', function (err) {
        console.log(err);                   <--- error thrown here 
    })
    .pipe(source('index.js')) // Readable Stream -> Stream Of Vinyl Files
    .pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
    .pipe(sourcemaps.init().on('error', function (e) {
        console.log(e);
    }))
    .pipe(uglify().on('error', function (e) {
        console.log('here')
        console.log(e);
    }))
    .pipe(rename({extname: '.min.js'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(./prod/js'));

我很想继续使用 …

我正在尝试使用browserify在Visual Studio环境(13,在Windows 7上)中设置构建流程,并且我得到一些奇怪的行为,试图让browserify工作.我不熟悉环境和技术,所以我在这里很困惑.

出于此测试的目的,我的文件结构与此处的基本API示例相同:http://viget.com/extend/gulp-browserify-starter-faq我使用npm安装了browserify.它运行的是版本5.12.0

如果我将app.js和hideElement.js放在一个简单的目录中,例如C:\ Temp,然后运行

c:\Temp> browserify app.js

一切正常.它捆绑了所有三个必需的文件,然后将它们吐出来.但是如果我从我的项目目录(C:\ Users \\ documents\visual studio 2013\Projects\ExcelConverter\ExcelConverterWeb)运行browserify命令,则会出现以下错误:

C:\Users\<name.redacted>\Documents\Visual Studio 2013\Projects\ExcelConverter\ExcelConverterWeb>browserify app.js
Error: SyntaxError: Unexpected token ? while parsing json file package.json
    at fns(C:\Users\<name.redacted>\AppData\Roaming\npm\node_modules\browserify\node_modules\module-deps\index.js:402:30)
    at fs.js:271:14
    at Object.oncomplete (fs.js:107:15)

我查看了有问题的文件,我无法做出正面或反面.那么,这里发生了什么？为什么当我从一个目录执行它时,browserify运行正常,而不是从另一个目录执行？我似乎使用相同的可执行文件.

(我正在尝试使用browserify作为基于gulp的构建过程的一部分,但是看到gulp产生的错误与我从命令行运行时看到的错误基本相同)

我想在Windows和Linux上观看并输出以下内容：

watchify ./src/login/login.js -o ./public/js/login.js -v && watchify ./src/unlock/unlock.js -o ./public/js/unlock.js -v && watchify ./src/admin/admin.js -o ./public/js/admin.js -v

为什么在./public/js目录中我只有一个文件：dashboard.js而不是所有文件？

我试图使用这个npm模块与browserify.

当我跑步时$ browserify build/widget.js -o bundle.js,我收到以下错误:

Error: Parsing file /Users/nir/browsewidget/node_modules/react-spin/src/main.js: Unexpected token (29:6)
    at Deps.parseDeps (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:436:28)
    at fromSource (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:375:44)
    at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:369:17
    at ConcatStream.<anonymous> (/usr/local/lib/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
    at ConcatStream.emit (events.js:129:20)
    at finishMaybe (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
    at endWritable (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
    at ConcatStream.Writable.end (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
    at DuplexWrapper.onend (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
    at DuplexWrapper.g (events.js:199:16)

注意:该文件build/widget.js不是JSX,它是使用JSX编译器构建的.

为什么我会收到意外的令牌？

根据snozza的回答编辑:

我安装了npm install reactify --save.

然后我跑了% browserify -t reactify build/widget.js 哪给了-bash: fg: %: no such job

然后我尝试了browserify -t reactify build/widget.js ,这给了:

Error: Parsing …

我正在尝试在浏览器中使用Browerifiy,如果我使用独立选项它会暴露一个模块.我不想这样做.网站和文档似乎在我实际编译代码的任何地方都被切断了.没有人说过如何在浏览器属性中实际使用代码.

我有一个笨拙的任务:

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-components/**/*.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        /* Commented out, zero documentation on this. Can only expose one module it seems.
        options: {
          browserifyOptions: {
            standalone: 'Utility' //Unable to say '**/*' error :-/
          }
        }
        */
      },

这似乎工作,它使这样的文件:

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

var UrlController = function(){};

UrlController.test = function () {
    return …

我有以下代码：

var $ = require('jquery');
var velocity = require('velocity-animate');

module.exports = function () {

    function togglePanel () {

        $('.trip-assist-search-panel__container').velocity({
            height: '0px'
        },{
            duration: 400
        });

    }

    return {
        togglePanel: togglePanel
    };

}();

当togglePanel()被触发时，将引发以下错误：

未捕获的TypeError：$（...）。velocity不是函数

通常可以通过确保在需要JQuery的库之前加载JQuery来解决此问题。但我是..

var $ = require('jquery'); // first
var velocity = require('velocity-animate'); // second

所以..什么给了？