更多

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

所有工作都很完美。我的vendor.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';

这里有lodash库。如果我们打开chrome控制台，我们就可以看到它有效。

现在我想在我的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 '_'.

我需要再次导入库，如果我这样做，lodash库将导入我的main.js文件中。它有效，但重复代码。

所以，最后问题:)如何在vendor.ts中导入lodash或其他东西，并在app中使用它而不必反复导入。

Answer 1

出现此错误：[默认] /home/g-montag/WebstormProjects/Chat/src/app/app.component.ts:17:16中的错误找不到名字'_'

编译时错误。快速解决方法：创建包含以下内容的vendor.d.ts文件：

declare var _:any;

如何使用vendor.ts构建的库与webpack导入一次？

1 个答案:

更多