使用ts-loader

时间:2017-03-28 13:59:40

标签: angular typescript webpack webpack-2

我一直在设置一个基本的角度2(打字稿)应用程序,它使用Webpack 2进行捆绑等。

我的问题是,当我使用ts-loader处理typescript(.ts)文件时,我会遇到很多错误。我怀疑,但我不完全确定,错误与ts-loader 不包括node_modules目录,即使我指定它在webpack配置中将其排除。

我只是希望能够设置我的webpack配置(和我的应用程序),以便可以转换打字稿,并且可以将应用程序与webpack正确捆绑在一起。请帮忙。

Webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/main.ts',
    output: {
    filename: './dist/bundle.js',
},
resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
    loaders: [{
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
    }]
},
plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    __dirname
),
]
};

的package.json

{
  "name": "tiptip-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack -d --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/platform-server": "2.4.6",
    "@angular/router": "3.4.6",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "reflect-metadata": "^0.1.9",
    "rxjs": "5.0.2",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "source-map-loader": "^0.2.0",
    "ts-loader": "^2.0.3",
    "typescript": "^2.2.0",
    "typings": "^2.1.0",
    "webpack": "^2.2.0"
  }
}

运行&nbsp运行构建' 后的错误消息 enter image description here

1 个答案:

答案 0 :(得分:3)

这不是Webpack问题,而是TypeScript问题。 Webpack正确地忽略了 group aleph bet gimel 1: A 1 2 0 2: B 2 0 1 但是TypeScript抱怨,因为它不知道node_modulesMap的类型。这些是ES6功能,如果您将Set中的target设置为compilerOptions,则不会在编辑中包含这些功能,因此无法了解其类型。来自compiler options文档:

  

注意:如果未指定es5,则会注入默认库。注入的默认库是:
  ►对于--target ES5:DOM,ES5,ScriptHost
  ►对于--target ES6:DOM,ES6,DOM.Iterable,ScriptHost

您可以将--lib选项设置为使用lib(或任何更高版本,例如es6):

es2017