如何用webpack导入vendors.ts构建库一次？

Question

我使用这个配置：

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

一切都很完美。我得到了所有库的vendors.js和只有应用程序代码和逻辑的main.js。我想拯救这个州。

查看vendors.ts：

// 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';

这里有房客图书馆。如果我们打开铬控制台，我们可以看到它的工作。

​

​

现在我想在我的app.component.ts中使用lodash

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

  ngOnInit() {
  }
}

我得到了一个错误：ERROR in [default] /home/g-montag/WebstormProjects/Chat/src/app/app.component.ts:17:16 Cannot find name '_'.

我再次需要导入库，如果我这样做，将在我的main.js文件中导入存档库。它可以工作，但是重复的代码。

所以，最后的问题是:)如何在vendors.ts中导入lodash或其他东西，并在app中使用它，而不需要一次又一次地导入。

Answer 1

获得此错误:默认/home/g-montag/WebstormProjects/Chat/src/app/app.component.ts:17:16中的错误找不到名称“_”

这是编译时错误。快速解决办法:创建一个包含以下内容的vendor.d.ts文件：

declare var _:any;

更多

参见环境声明：https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html