首页 文章

无法部署lodash

提问于
浏览
1

我和lodash有麻烦了 . 当我使用gulp部署时,我总是出现同样的错误:

vendors.min.js:3 GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found)

我将库声明为 index.html 文件

<script src="node_modules/lodash/lodash.js"></script>

我将lodash导入我的 typescript file

///<reference path="../../../typings/modules/lodash/index.d.ts" />
import * as _ from "lodash";

当我测试我的网站localy时(通过使用npm start启动lite服务器),这是有效的 .

现在,我想使用Gulp部署我的网站 . 这是我的 gulp file

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
  });

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'typings/main/ambient/firebase/firebase.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist'));
});

gulp.task('vendor-bundle', function() {
    gulp.src([
            'node_modules/es6-shim/es6-shim.min.js',
            'node_modules/systemjs/dist/system-polyfills.js',
            '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/http.dev.js',
            'node_modules/angular2/bundles/router.min.js',
            'node_modules/lodash/lodash.js'

        ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

gulp.task('default',[ 'app-bundle', 'vendor-bundle' ], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

当我测试我的网站时,我有以下错误:

vendors.min.js:3 GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found)r @ vendors.min.js:3e.scheduleTask @ vendors.min.js:3e.scheduleMacroTask @ vendors.min.js:3(anonymous function) @ vendors.min.js:3send @ VM3157:3L @ vendors.min.js:4(anonymous function) @ vendors.min.js:4e @ vendors.min.js:3(anonymous function) @ vendors.min.js:4(anonymous function) @ vendors.min.js:4(anonymous function) @ vendors.min.js:5(anonymous function) @ vendors.min.js:5(anonymous function) @ vendors.min.js:5(anonymous function) @ vendors.min.js:5(anonymous function) @ vendors.min.js:5(anonymous function) @ vendors.min.js:4e.invoke @ vendors.min.js:3e.run @ vendors.min.js:3(anonymous function) @ vendors.min.js:3e.invokeTask @ vendors.min.js:3e.runTask @ vendors.min.js:3o @ vendors.min.js:3invoke @ vendors.min.js:3
vendors.min.js:3 Error: XHR error (404 Not Found) loading http://127.0.0.1/projects/myproject/lodash
    Error loading http://127.0.0.1/projects/myproject/lodash as "lodash" from http://127.0.0.1/projects/myproject/services/base-services/base.services
    at o (http://127.0.0.1/projects/myproject/vendors.min.js:4:10124)
    at XMLHttpRequest.L.a.onreadystatechange (http://127.0.0.1/projects/myproject/vendors.min.js:4:10712)
    at XMLHttpRequest.t [as _onreadystatechange] (http://127.0.0.1/projects/myproject/vendors.min.js:3:12638)
    at e.invokeTask (http://127.0.0.1/projects/myproject/vendors.min.js:3:8519)
    at e.runTask (http://127.0.0.1/projects/myproject/vendors.min.js:3:5879)
    at XMLHttpRequest.invoke (http://127.0.0.1/projects/myproject/vendors.min.js:3:9628)

这是我的SystemJS:

System.config({
  paths: {
    'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
    'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
    'rxjs/*' : 'node_modules/rxjs/*.js'
  },
  map: {
    '@angular' : 'angular2',
    'videogular2' : 'node_modules/videogular2',
    'rxjs': 'node_modules/rxjs',
    'lodash': 'node_modules/lodash'
  },
  packages: {
    map: {
      'rxjs': 'node_modules/rxjs'
    },
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    node_modules: {
      defaultExtension: 'js'
    },
    lodash:{
      main:'lodash',
      defaultExtension:'js'
    }
  }
});
System.import('app/boot')
      .then(null, console.error.bind(console));

我搜索了很多天的解决方案,我真的很感激任何帮助:) .

部署时,我也添加了该脚本:

document.addEventListener('DOMContentLoaded', function () {
  System.import('boot')
        .then(null, console.error.bind(console));
});

1 回答

  • 1

    我终于成功了!

    • 创建系统配置如下:

    System.config({
    元:{
    'vendors.min.js':{
    格式为:“全球性”
    }
    },
    Map :{
    'lodash': 'HTTP://127.0.0.1/js/lodash.min.js'
    }
    });

    • 为lodash添加gulp任务

    gulp.task('lodash',function(){
    return gulp.src('node_modules / lodash / lodash.min.js')
    .pipe(gulp.dest(” ./ DIST / JS'));
    });

    我希望这会有助于其他人 .

相关问题