javascript - 对 node_modules 中文件的本地更改(Angular 2)

Question

我知道这可能是一个非常愚蠢的问题，但我找不到与 stackoverflow 上其他帖子匹配的内容...

那么:我可以修改外部模块的文件，只需保存文件并执行我的应用程序可以监听的操作吗？

目前，我正在尝试在 ng2-datepicker 模块(在 node_modules 文件夹内)更改一些 scss 样式，但如果我保存并启动 ng 服务，更改将不会影响我的项目。

我知道这是一个简单的问题，但我不知道 Angular2 项目的后台架构。

提前致谢。

(ps我已经看到我可以 fork git 然后执行类似 npm install 的操作。 非常有趣，但我也想知道如何在本地获得相同的结果)

Answer 1

如果您使用 gulp 文件，您可以告诉更改后的 lib 文件路径复制到构建文件夹，检查下面代码中的 gulp.task('copy-libs') git repo for angular2-tour-of-heroes using gulp

const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const sourcemaps = require('gulp-sourcemaps');
const tslint = require('gulp-tslint');
const browserSync = require('browser-sync');
const reload = browserSync.reload;
const tsconfig = require('tsconfig-glob');

// clean the contents of the distribution directory
gulp.task('clean', function () {
  return del('dist/**/*');
});

// copy static assets - i.e. non TypeScript compiled source
gulp.task('copy:assets', ['clean'], function() {
  return gulp.src(['app/**/*', 'index.html', 'styles.css', '!app/**/*.ts'], { base : './' })
    .pipe(gulp.dest('dist'))
});

// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
  return gulp.src([
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/rxjs/bundles/Rx.js',
      'node_modules/angular2/bundles/angular2.dev.js',
      'node_modules/angular2/bundles/router.dev.js',
      'node_modules/node-uuid/uuid.js',
      'node_modules/immutable/dist/immutable.js'
      'yourpath/changedFileName.js'
    ])
    .pipe(gulp.dest('dist/lib'))
});

// linting
gulp.task('tslint', function() {
  return gulp.src('app/**/*.ts')
    .pipe(tslint())
    .pipe(tslint.report('verbose'));
});


// TypeScript compile
gulp.task('compile', ['clean'], function () {
  return gulp
    .src(tscConfig.files)
    .pipe(sourcemaps.init())
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/app'));
});

// update the tsconfig files based on the glob pattern
gulp.task('tsconfig-glob', function () {
  return tsconfig({
    configPath: '.',
    indent: 2
  });
});

// Run browsersync for development
gulp.task('serve', ['build'], function() {
  browserSync({
    server: {
      baseDir: 'dist'
    }
  });

  gulp.watch(['app/**/*', 'index.html', 'styles.css'], ['buildAndReload']);
});

gulp.task('build', ['tslint', 'compile', 'copy:libs', 'copy:assets']);
gulp.task('buildAndReload', ['build'], reload);
gulp.task('default', ['build']);