언더 코어를 앵귤러 2 CLI 프로젝트로 가져 오기

Question

앵귤러 CLI 도구로 새 프로젝트를 시작했습니다. 그 다음 나는 밑줄을 가져 오기 위해 this official guide을 따른다. 그리고 나는 정확하게가 말하는 를한다.

하지만 여전히 브라우저에서 내 프로젝트 충돌 내가 오류 메시지가 내 app.component에 밑줄을 사용하려고하면 밑줄이 DIST/공급 업체 폴더에 추가됩니다

ORIGINAL EXCEPTION: ReferenceError: _ is not defined

그래서 내 생각이 있다는 것 문제는 Systemjs 구성에 있습니다.

"use strict"; 

// SystemJS configuration file, see links for more information 
// https://github.com/systemjs/systemjs 
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 

/*********************************************************************************************** 
* User Configuration. 
**********************************************************************************************/ 
/** Map relative paths to URLs. */ 
const map: any = { 
    'underscore':     'vendor/underscore/', 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'underscore':     { main: 'underscore.js', format: 'cjs' }, 
}; 

//////////////////////////////////////////////////////////////////////////////////////////////// 
/*********************************************************************************************** 
* Everything underneath this line is managed by the CLI. 
**********************************************************************************************/ 
const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages }); 

내 app.component : 내가 가서 할

/// <reference path="../../typings/globals/underscore/index.d.ts" /> 

import { Component } from '@angular/core'; 

declare var _; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: `<h1>{{title}}</h1>` 
}) 
export class AppComponent { 
    title = _.version; 
} 

여기

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    sassCompiler: { 
     includePaths: [ 
     'src/styles' 
     ] 
    }, 
    vendorNpmFiles: [ 
     'systemjs/dist/system-polyfills.js', 
     'systemjs/dist/system.src.js', 
     'zone.js/dist/**/*.+(js|js.map)', 
     'es6-shim/es6-shim.js', 
     'reflect-metadata/**/*.+(ts|js|js.map)', 
     'rxjs/**/*.+(js|js.map)', 
     'underscore/underscore.js', 
     '@angular/**/*.+(js|js.map)' 
    ] 
    }); 
}; 

내 시스템 설정입니다 : 여기

내 각-CLI 빌드입니다 잘못된?

왜이 이렇게 복잡합니까? 공동체가 단순한 제 3 자 라이브러리를 추가하는 것이 번거롭다는 것을 받아 들일 수 있습니까?

Answer 1

구성은 기본적으로 underscore으로 설정되므로 필요한 경우 SystemJS가 찾을 수 있습니다. 사람이 underscore을 요구하는 경우가 vendor/underscore/ 폴더에서 찾을 수있는 파일 underscore.js - 그리고 그것의 모듈 형식은 CommonJS (cjs)입니다 : 당신이 system-config.ts을 변경하면

, 당신은 SystemJS 말했다. angular-cli-build.js에서

변경은 선택과 vendor 폴더에 던져해야 파일을 어떤 각도-CLI 이야기에 대한 것입니다. (SystemJS에 거기에 밑줄이 있다는 것을 말하면, 그것이 거기에있는 이유입니다.)

은 밑줄을 앱의 전체 범위로 가져 오거나 추가하지 않습니다.

각 .ts 파일에서 파일을 가져와야하므로 SystemJS가이 파일을 해당 모듈의 .js에 추가합니다. 대신이 두 라인의

:

import * as _ from 'underscore'; 

---

문제가있는 경우의 .js 생성 된 소스를 검사하는 시도가에서 실행되는 :

/// <reference path="../../typings/globals/underscore/index.d.ts" /> 
declare var _; 

이 파일이 추가 브라우저. 귀하의 경우에는 underscore을 가져 오는 require() 메서드가 없다는 것을 알게 될 것입니다.

Answer 2

제 3 자 lib를 추가하는 의사가 오해의 소지가 있습니다. 나는 1 시간 이상 동안 나의 머리를 세게 치고 있었다!당신이 필요로하는 무엇

declare var _; // this won't work. 

내가 이미 시도했습니다

/// <reference path="../../../typings/globals/underscore/index.d.ts" /> 
import * as _ from 'underscore';