Question

我正在尝试将我的项目迁移到webpack，但我一直在努力解决这个问题：

ERROR in ./app/app.component.ts
Module not found: Error: Can't resolve '@common' in 
 @ ./app/app.component.ts 16:16-34
 @ ./app/app.module.ts
 @ ./app/main.ts

我有一个我想要包含在我的构建中的自定义库，这个库是使用typescript和AMD模块创建的。我还使用索引文件重新导出内容，并使用类似的东西导入所有内容：

import { a,b,c,d,e,f,g } from '@common'

我有以下项目结构：

--app/ 
---dir1/
---app.module.ts
---app.component.ts
---main.ts 
--scripts/
---_app/ 
----common.d.ts
----common.js
--webpack.config.js
--tsconfig.js

我的webpack.config：

entry: {
        vendor: './src/vendor',
        //util: './scripts/_app/util.js',
        //common: './scripts/_app/common.js',
        app: './app/main'
    },
output: {
        filename: "[name].js",
        path: __dirname + "/dist",
        // Making sure the CSS and JS files that are split out do not break the template cshtml.
        publicPath: "/dist/",
        // Defining a global var that can used to call functions from within ASP.NET Razor pages.
        library: "app",
        libraryTarget: "var"
    },
 resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".js", ".tsx", ".ts", ".json", ".html"],
        modules: [
            path.resolve('.'),
            path.join(__dirname, "./scripts/_app"),
            path.resolve('./node_modules')
        ]
    },
    module: {
        loaders: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
    },

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

import { LayoutComponent } from 'app/_layout/LayoutComponent';
import { ClientContext } from "@common";

@Component({
    selector: 'app',
    template: `

的package.json

{
  "version": "1.0.0",
  "name": "sds",
  "private": true,
  "description": "",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "@angular/animations": "4.4.6",
    "systemjs": "0.19.31",
    "core-js": "2.4.1",
    "rxjs": "5.4.3",
    "zone.js": "0.8.12",
    "font-awesome": "~4.7.0",
    "popper.js": "1.12.5",
    "bootstrap": "4.0.0-beta",
    "@swimlane/ngx-datatable": "9.3.0",
    "@angular/material": "2.0.0-beta.12",
    "@angular/cdk": "2.0.0-beta.12",
    "jquery": "3.2.1",
    "toastr": "2.1.2",
    "typescript": "2.4.1",
    "@types/linq": "latest"
  },
  "devDependencies": {
    "awesome-typescript-loader": "3.2.1",
    "ts-loader": "3.2.0",
    "clean-webpack-plugin": "0.1.17",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "2.30.1",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.3",
    "webpack-merge": "4.1.1",
    "source-map-loader": "^0.2.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.4"
  },
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"  ",
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "build:dev"
    ]
  }
}

我尝试使用ts-loader和awesome-typescript-loader而没有运气。

Answer 1

显然，web pack不支持AMD命名模块。

https://github.com/webpack/webpack/issues/6058

必须有办法让webpack知道如何解决这些自定义脚本，我只是不知道如何。

找不到Webpack模块：错误：无法解决

1 个答案: