2016-03-27 20 views
1

Bu yapılandırma kullanıyorum:Satıcılar.ts kütüphanelerinden nasıl kullanılır?

'use strict'; 
const path = require('path'); 
const webpack = require("webpack"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const autoprefixer = require('autoprefixer'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const AssetsPlugin = require('assets-webpack-plugin'); 
const assetsPluginInstance = new AssetsPlugin(); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    cache: true, 
    watch: true, 
    devtool: 'cheap-module-source-map', 
    context: path.join(__dirname, "/src"), 
    entry: { 
    vendors: "./vendors", 
    main: "./main" 
    }, 
    output: { 
    path: path.join(__dirname, '/public'), 
    publicPath: "/", 
    filename: "[name].js" 
    }, 
    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'awesome-typescript-loader', 
     exclude: [/\.(spec|e2e)\.ts$/] 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css') 
     }, 
     { 
     test: /\.(scss|sass)$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss-loader!resolve-url!sass?sourceMap') 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)$/i, 
     loader: 'url?name=imgs/[name].[ext]&limit=100000' 
     }, 
     { 
     test: /\.(svg|ttf|eot|woff|woff2)$/, 
     loader: 'file?name=fonts/[name].[ext]', 
     exclude: /\/src\/imgs\// 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json?name=data/[name].[ext]' 
     }, 
     { 
     test: /index\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.html$/, 
     loader: 'raw', 
     exclude: path.join(__dirname, "src/index.html") 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendors', 
     filename: 'vendors.js', 
     minChunks: 2 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     "window.jQuery": 'jquery' 
    }), 
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), 
    new ExtractTextPlugin("[name].css", { 
     disable: false, 
     allChunks: true 
    }), 
    new HtmlWebpackPlugin({ 
     template: './index.html', 
     inject: 'body', 
     favicon: 'favicon.ico', 
     chunksSortMode: 'none' 
    }), 
    new AssetsPlugin({ 
     filename: 'assets.json', 
     path: path.join(__dirname, 'public/') 
    }), 
    new CleanWebpackPlugin(['./public']) 
    ], 
    postcss: function() { 
    return { 
     defaults: [autoprefixer({browsers: ['last 2 versions']})] 
    }; 
    } 
}; 

Tüm mükemmel çalışır. Sadece uygulama kodu ve mantığı ile vendors.js'yi tüm kitaplıklar ve main.js ile alıyorum. Bu durumu kurtarmak istiyorum. vendors.ts için

Görünüş:

// Polyfills 
import 'angular2/bundles/angular2-polyfills.js'; 

// Angular 2 
import 'angular2/platform/browser'; 
import 'angular2/core'; 
import 'angular2/http'; 
import 'angular2/router'; 

import 'rxjs/Observable'; 
import 'rxjs/Subject'; 

import 'jquery/dist/jquery.min.js'; 
import 'bootstrap/dist/js/bootstrap.min.js'; 

import 'lodash/lodash.min.js'; 
import 'moment'; 
import 'accounting/accounting.min.js'; 

//css 
import './vendors.scss'; 

Burada lodash kütüphane var. Krom konsolunu açarsak, çalışmasını görebiliriz.

screenshot working lodash

Şimdi

export class AppComponent implements OnInit { 
    constructor() { 
    console.log(_.last([1, 2, 3])); 
    } 

    ngOnInit() { 
    } 
} 

bu hata var benim app.component.ts içinde lodash kullanmak istiyorum: ERROR in [default] /home/g-montag/WebstormProjects/Chat/src/app/app.component.ts:17:16 Cannot find name '_'.

tekrar alma kitaplığı gerekir ve eğer bunu yaparsam , lodash kütüphanesi main.js dosyasımda içe aktarılacak. Çalışır, ancak kod çoğaltılır.

Son olarak, soru :) vendda.ts'da lodash veya başka bir şey nasıl içe aktarılır ve tekrar tekrar içe aktarmadan uygulamada kullanılır.

+0

Eğer yakından bakmak isterseniz, buradan https projemi bulabilirsiniz:

declare var _:any; 

Daha

ortam bildirimleri bakınız: içeren bir vendor.d.ts dosyası oluşturun // github.com/G-MontaG/Chat –

cevap