Question

我目前正在使用.Net Core，React with TypeScript，Ant Design for UI和Webpack捆绑前端元素的项目中。当我运行dotnet run时，我可以预览该站点，并且看起来正确。但是，当我运行dotnet publish并查看网站的发布版本时，大多数CSS都是正确的，但是一页上的间距存在明显的问题。

左边的图像是在调试模式下运行的正确图像，右边的图像是已发布的版本。

我试图查看是否是webpack的问题，但是当我在发布过程中以开发人员模式运行webpack时遇到了这些问题，就像我在运行dotnet run时所做的那样，所以这似乎不是问题；但是，似乎在发布过程中未复制某些文件或信息，因此仍然可能是问题所在。

编辑：经过更多调查后，看来我的应用程序仅在使用UseWebpackDevMiddleware时才能运行。通过查找，似乎功能已被弃用，因此理想情况下，我应该摆脱它；但是，与此同时，我试图弄清楚为什么它可以与热重装一起使用，但不能打包所有东西。

我已经没有足够的想法来测试以解决此问题，因此，如果您对我可能要引起此问题的事情有任何想法，请告诉我。以下是我的webpack配置和csproj文件。随时让我知道是否还有其他东西可以帮助显示。

webpack

const tsImportPluginFactory = require('ts-import-plugin');
const { CheckerPlugin }     = require('awesome-typescript-loader');
const isDevelopment = process.env.NODE_ENV === 'development';

const webpack = require('webpack');
const dotenv = require('dotenv');
const path = require('path');


const currentPath = path.join(__dirname);
const appsettingsType = process.env.APP_SETTINGS_TYPE;
const envPath = currentPath + '/.env.' + appsettingsType;

const fileEnv = dotenv.config({ path: envPath }).parsed;
// reduce it to a nice object, the same as before
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
return prev;
}, {});

module.exports = {
    mode: isDevelopment ? 'development' : 'production',
    entry: { 
        main: path.resolve(__dirname, 'src') +"/index.tsx"
    },
    output: {
        filename: 'bundle.js',
        path:  path.join(__dirname, 'dist'),
        publicPath:  "/dist/",
        sourceMapFilename: 'bundle.map'
    },
   // watch: true,
    // Enable sourcemaps for debugging webpack's output.
   devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".less", ".css"],
        alias: {
            src: './src/*',
            'react-dom': '@hot-loader/react-dom'
        }

    },


    plugins: [
        new CheckerPlugin(),
        new webpack.DefinePlugin(envKeys)
    ],
    //plugins: [],
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: true,
                            plugins: ['react-hot-loader/babel'],


                        },
                    },
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            getCustomTransformers: () => ({
                                before: [ tsImportPluginFactory(
                                    {
                                        libraryName: 'antd',
                                        libraryDirectory: 'es',
                                        style: 'css',
                                    }
                                ) ]
                            }),

                        },
                    }, 

                ],

            },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            {
                test: /\.(less)$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                        loader: 'css-loader', // translates CSS into CommonJS
                }, {
                    loader: 'less-loader', // compiles Less to CSS
                    options:{javascriptEnabled:true}
                }]},

            // All '.css' files will be handle by 'style-loader' and 'css-loader' modules
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader', // translates CSS into CommonJS
                    },
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {},
                    },
                ],
            }

        ]
    },


    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.    
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>wwwroot\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
    <PlatformTarget>x64</PlatformTarget>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Google.Apis.Auth" Version="1.38.2" />
    <PackageReference Include="Google.Apis.Gmail.v1" Version="1.38.2.1543" />
    <PackageReference Include="Google.Apis.Oauth2.v2" Version="1.38.2.1532" />
    <PackageReference Include="Microsoft.AspNetCore.App" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="2.2.2" />
    <PackageReference Include="Microsoft.AspNetCore.Identity" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.2.4" />
    <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="2.2.0" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.2.3" />
    <PackageReference Include="MimeKit" Version="2.1.4" />
    <PackageReference Include="MongoDB.Driver" Version="2.8.0" />
    <PackageReference Include="Newtonsoft.Json" Version="12.0.1" />
    <PackageReference Include="Serilog" Version="2.8.0" />
    <PackageReference Include="Serilog.Sinks.Console" Version="3.1.1" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <Content Include="wwwroot\.babelrc" />
    <Content Include="wwwroot\index.html" />
    <Content Include="wwwroot\webpack.config.js" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
    <None Remove="wwwroot\src\reducers\**" />
    <Content Remove="wwwroot\src\reducers\**" />
    <None Include="wwwroot\src\utils\appconst.ts" />
  </ItemGroup>

  <ItemGroup>
    <Compile Remove="wwwroot\src\reducers\**" />
  </ItemGroup>

  <ItemGroup>
    <EmbeddedResource Remove="wwwroot\src\reducers\**" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="wwwroot\dist" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" IgnoreExitCode="true"/>

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**;$(SpaRoot)dist\**;$(SpaRoot)index.html; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

Dotnet发布而不是使用React和Ant Design运行Dotnet的CSS问题

0 个答案: