Question

我一直在网上寻找答案，但无济于事。请关注我，因为我是webpack的新手以及随附的所有内容。

我基本上想在我的Visual Studio 2017解决方案中使用以下几个项目： -

Angular with .net core web api project
仅使用常见打字稿文件分隔项目
其他网络项目（并非所有Angular！）

所以我想要获得的基本上是我的共同（或共享）打字稿到它自己独立的项目中，所以我不必将每个模块复制到其他项目中。目前我使用空白的node.js项目模板来存储我的常用打字稿文件（无论这是对还是错/好不好我不知道）。我的问题是如果我从我的角度或其他web项目引用这个公共项目中的任何文件（例如从@ myShared / someClass＆＃39 ;;}导入{SomeClass}并且该文件本身在那时有任何import语句我从webpack收到错误...

Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type

但是，如果我将此文件复制到我的角度或web项目，那么它们都构建正常，webpack不会吐出任何错误......所以我知道这些文件的代码是可以的。

这是我的webpack配置的相关部分......

    resolve: {
        extensions: ['.js', '.ts'],
        plugins: [
            new TsConfigPathsPlugin('tsconfig.json', 'typescript')
        ]
    },
    output: {
        filename: '[name].js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: [
                    /ClientApp/,
                    '../SharedTypescriptLibary/src'
                ],
                use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack'
            },
            {
                test: /\.html$/,
                use: 'html-loader?minimize=false'
            },
            {
                test: /\.(css|scss)$/,
                loaders: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ]
    },
    plugins: [
        new CheckerPlugin()
    ]

这是我的tsconfig.json ...

{
  "atom": { "rewriteTsconfig": false },
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es6" 
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@myShared/*": [ "../SharedTypescriptLibary/src/*" ],          
      "@src/*": [ "./ClientApp/*" ]
    },
    "skipDefaultLibCheck": true,
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
    "sourceMap": true,   
    "target": "es5",
    "types": [ "webpack-env" ]
  },
  "exclude": [
    "bin",
    "node_modules"
  ]
}

希望在不同的项目中使用通用打字稿只意味着我需要将常用打字稿源文件夹的相对路径添加到＆＃39; include＆＃39;模块规则中的数组。奇怪的是它确实有效，只要在常见的打字稿文件中就没有导入语句！？！

我确实尝试过移动＆＃39; include＆＃39;到tsconfig.json并从webpack配置中删除它，但我得到完全相同的问题/错误......

有谁能看到我在这里做错了什么？或者，如果我正在做什么甚至可能？ webpack或awesome-typescript-loader是否会出现问题？

请帮助：）

Answer 1

很抱歉回答我自己的问题，但在阅读了更多的webpack文档后，我终于找到了解决方法。似乎如果你在resolve.modules中添加所有代码路径，那么它是有效的 - 或者至少对我来说它有。

这是对“解决方案”的修改。以上配置的一部分为我修好了......

   resolve: {
        extensions: [
            '.js',
            '.ts'
        ],
        plugins: [
            new TsConfigPathsPlugin('./tsconfig.json', 'typescript')
        ],
        // this is the what fixed it for me, here specify paths where our code resides (including shared libraries etc...)
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'ClientApp'),
            path.resolve(__dirname, '../SharedTypescriptLibary/src')
        ]            
    }

最后，我可以将我的共享打字稿放在一个单独的项目中！ ; - ）

Visual Studio 2017使用webpack和angular

1 个答案: