Gulp- Watchify 不检测对子模块文件夹的更改

Question

我的 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'));
    }
});

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import Login from './components/auth/login';
import Logout from './components/auth/logout';
import NotFound from './components/common/NotFound';
import RequireAuth from './components/auth/require_auth'; //HOC - Higher Order Component
import AppHeader from './components/common/AppHeader';
import Dashboard from './components/Dashboard/Dashboard';
import Reports from './components/Reports';
import Settings from './components/settings/Settings';
import Customisation from './components/customisation/Customisation';
import PatientsListing from './components/PatientsListing';
import Patient from './components/patient/Patient';
import AssessmentContent from './components/patient/Assessments/AssessmentContent';
import Login_Patient from './components/auth/login_patient';
import PatientQuestionnaireListing from './components/patient/questionnaire/PatientQuestionnaireListing';

import * as actions from  './actions';
import { SET_PATHS, CHECK_CONNECTION_STATUS } from './actions/types';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

actions.getPaths(renderApp);

function renderApp(paths) {
    store.dispatch({
        type: CHECK_CONNECTION_STATUS,
        payload: true,
    });

    store.dispatch({
        type: SET_PATHS,
        payload: paths,
    });

    ReactDOM.render(
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <AppHeader />
                    <div style={{marginTop:30}}>
                    <Switch >
                        <Route exact path={`${paths.appUrl}/login`} component={Login} />
                        <Route exact path={`${paths.appUrl}/logout`} component={Logout} />

                        <Route exact path={`${paths.appUrl}/`} component={RequireAuth(Dashboard)} />
                        <Route exact path={`${paths.appUrl}/reports`} component={ RequireAuth(Reports) } />
                        <Route exact path={`${paths.appUrl}/settings`} component={ RequireAuth(Settings) } />
                        <Route exact path={`${paths.appUrl}/customisation`} component={ RequireAuth(Customisation) } />
                        <Route exact path={`${paths.appUrl}/listing`} component={ RequireAuth(PatientsListing) } />
                        <Route exact path={`${paths.appUrl}/view/:type/:start/:end`} component={ RequireAuth(PatientsListing) } />
                        <Route exact path={`${paths.appUrl}/patient/:admissionId`} component={ RequireAuth(Patient) } />
                        <Route exact path={`${paths.appUrl}/patient/:admissionId/assessment/:assessmentId`} component={ RequireAuth(AssessmentContent) } />

                        {/*QUESTIONNAIRE*/}
                        <Route exact path={`${paths.appUrl}/login_patient`} component={Login_Patient} />
                        <Route exact path={`${paths.appUrl}/patient_questionnaire_listing`} component={PatientQuestionnaireListing} />

                        <Route component={ NotFound } />

                    </Switch>
                    </div>
                </div>
            </BrowserRouter>
        </Provider>
      , document.getElementById('main_app_div')
    );
}

PeriodForm.js

import React, {Component} from 'react';
import { reduxForm, Field, getFormValues } from 'redux-form';
import { Row, Col, Button, Table, Glyphicon } from 'react-bootstrap';
import { connect } from 'react-redux';
import * as actions from '../_actions/actions';
import { withRouter } from 'react-router-dom';
import _ from 'lodash';
import moment from 'moment';
import { getList } from '../../../../../helpers/listHelper';
import { renderDropdownList } from '../../../../../helpers/forms';
import { getListFromState } from '../_helpers/listHandler';

class PeriodForm extends Component {
.
.
.
}

Answer 1

我认为您的代码是正确的。它应该与您的 app.js.

中所需的文件相关

这是一个工作演示 demo repo

如果你 post 部分 app.js 也许我可以帮助你更多。

Answer 2

var b = browserify({
        entries: [paths.programAppjs],
        cache: {},
        packageCache: {},
        plugin: [watchify]
      })
      .transform(babelify.configure({
        presets : ["es2015","react"],
        env: {
            development: {
                plugins: [
                    ["react-transform", {
                    transforms: [{
                        transform: "livereactload/babel-transform",
                        imports: ["react"]
                    }]
                    }],
                "transform-class-properties",
                "transform-object-rest-spread"
            ]
        }
        }
    }));

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

    function bundle() {
    console.log('start gulp');
    b.bundle()
        .on('error', console.error)
        .on('log', function (msg) {console.log(time()+" "+ appname+" "+msg);})
        .pipe(fs.createWriteStream('./public/js/bundle.js'));
        console.log('finish gulp'+time());
    }

Gulp- Watchify 不检测对子模块文件夹的更改

Gulp- Watchify does not detect changes to a submodule folder

transpiler

reactjs

gulp

watchify