标签: watchify

我的watchify-program未检测到子模块中的更改。

子模块位于 ../js/lib/melajs/**/*.js

browserify-program但是，当我运行它时，它会编译子模块。

下面是两个任务。

programAppjs: pathsBase+"js/app.js",

gulp.task("browserify-program",function(){
    //appname global variable set in previous task
    return browserify([paths.programAppjs])
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./public/js'));
});

gulp.task("watchify-program",function(){
    var b = browserify({
        entries: [paths.programAppjs],
        cache: {},
        packageCache: {},
        plugin: [watchify]
    });

    b.on('update', bundle);
    b.on('log', function (msg) {console.log(time()+" "+ appname+" "+msg);})
    bundle();

    function bundle() {
        b.bundle().pipe(fs.createWriteStream('./public/js/bundle.js'));
    }
});

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, …

这似乎是一个非常简单的问题,但花了最后3个小时来研究它,发现如果不使用watchify,每次保存新文件都会很慢.

这是我的目录树:

gulpfile.js
package.json

www/
  default.htm
     <script src="toBundleJsHere/file123.js"></script>

  toBundletheseJs/
    componentX/
       file1.js
    componentY/
       file2.js
    componentZ/
      file3.js

  toPutBundledJsHere/
      file123.js

要求.在文件夹中每次创建或保存文件时,toBundleTheseJs/我希望将此文件重新分组toBundleJsHere/

我需要在package.json文件中包含哪些内容？

什么是我需要写入我的gulp文件的最小值？

这应该尽可能快,所以认为我应该使用browserify并观察.我想了解最小步骤,所以使用像jspm这样的包管理器这一点太过分了.

谢谢

我使用babel-plugin-transform-html-import-to-string将 html 模板文件导入到我的 javascript 组件中。

当我使用 watchify 时，如果 html 已更改，它不会更新。仅 Javascript 文件更改。npm 脚本是这样的：

watchify -p browserify-hmr -t [babelify ext .js .html] src/index.js -o public/bundle.js

由于这不起作用，我使用 watch 代替，如下所示，但我的构建至少比以前慢 5 秒，当它们是即时的。

watch 'npm run browserify' src/ -d --interval=1 browserify 脚本在哪里 browserify -t [babelify ext .js] src/index.js -o public/bundle.js

任何人都知道如何在不牺牲快速重建的情况下对 html 文件更改运行 browserify？

我想在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而不是所有文件？

我来自AMD,似乎已经做错了.

我做了这样的设置:

client/js/index.js (entry point)
client/js/test.js

我希望它建立:

build/app.js

index.js需要test.js像这样:

var test = require('./test');

我的gulp watchify任务看起来像这样:

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

// https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
gulp.task('watch', function () {
    var bundler = watchify(browserify('./client/js/index.js', watchify.args));

    bundler.on('update', rebundle);

    function rebundle () {
        return bundler.bundle()
            // Log errors if they happen.
            .on('error', function(e) {
                gutil.log('Browserify Error', e.message);
            })
            .pipe(source('app.js'))
            .pipe(gulp.dest('./build'));
    }

    return rebundle();
});

编译后的代码看起来很糟糕,因为test.js …

我想做什么？ 我想使用节点模块和es6 javascript语法创建一个项目.为了使其尽可能模块化和独立,我决定改用watchify.我的html页面看起来像这样

...some unrelated html code

<dib id='content'></div>
<script type='text/javascript' src='correct(checked) path to my bundle.js file'></script>

...some unrelated html code

我的whatchify命令看起来像这样

watchify src/app.js -o destination/bundle.js -t [babelify --presets [ es2015 ] ]

虽然我的受抚养人看起来像这样

"dependencies": {
    "bluebird": "^3.5.1",
    "jquery": "^3.3.1",
    "three": "^0.92.0",
    "three-obj-exporter": "0.0.1",
    "three-obj-loader": "^1.1.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babelify": "^8.0.0",
    "nodemon": "^1.17.4"
  }

现在我的src文件中没有多少我只是从test.js文件中导入了一个测试函数,并且需要jquery.

import print from './taskobject';

function test(){
    return 0;
}

现在,我不明白？ 字面上我什么都不做,但我仍然在控制台中得到以下错误

GET blob:http://127.0.0.1/fbfa8eff-f538-42cf-aa2d-ae2940247aaf 0 () …