javascript 在tsc构建中加载pn失败

aiqt4smr  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(82)

我有一个TSC Build React NPM包。我想在我的项目中使用PNG。
不幸的是，我得到一个错误，当我试图建立项目。运行Stroybook工作正常。图像也显示在屏幕上。只有当我试图建立我reseive一个错误。所以我认为配置有问题。我希望有人能帮助我修复配置，所以它会成功地建立。

错误

npm run build

> portshare-frontend-libary-components@0.1.0 build
> tsdx build

@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
✓ Creating entry file 1.2 secs
Error: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

at D:\2. repo\portshare-frontend-libary-components\src\image\placeholder.png:1:0

1: ����►JFIF☺☺☺☺,☺,��VExifMM♦☺→♣☺>☺♣☺☺(♥☺☻☻‼♥☺☺☺,☺☺,☺��,Photoshop 3.08BIM♦♦∟☺Z♥��
�http://ns.adobe.com/xap/1.0/<?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?>
   ^
2: <x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Image::ExifTool 10.10'>
3: <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>

PS D:\2. repo\portshare-frontend-libary-components>

tsconfig

{
  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    // output .d.ts declaration files for consumers
    "declaration": true,
    // output .js.map sourcemap files for consumers
    "sourceMap": true,
    // match output dir to input dir. e.g. dist/index instead of dist/src/index
    "rootDir": "./src",
    // stricter type-checking for stronger correctness. Recommended by TS
    "strict": true,
    // linter checks for common issues
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    // use Node's module resolution algorithm, instead of the legacy TS one
    "moduleResolution": "node",
    // transpile JSX to React.createElement
    "jsx": "react",
    // interop between ESM and CJS modules. Recommended by TS
    "esModuleInterop": true,
    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
    "skipLibCheck": true,
    // error out if import and file system have a casing mismatch. Recommended by TS
    "forceConsistentCasingInFileNames": true,
    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
    "noEmit": true,
    "resolveJsonModule": true, // Enable importing JSON files
    "allowSyntheticDefaultImports": true, // Enable synthetic default imports
    "allowUmdGlobalAccess": true, // Allow accessing UMD globals
    "types": ["node"], // Include the 'node' type definitions
    "target": "es2020",
    "baseUrl": ".",
    "paths": {
      "*": ["types/*"],
      "src/*": ["src/*"]
    },
    "downlevelIteration": true,
    "typeRoots": ["node_modules/@types"]
  }
}

tsdx.config.js

const scss = require('rollup-plugin-scss');
const { default: url } = require('@rollup/plugin-url');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      scss({
        output: true,
        sass: require('sass'),
        sassOptions: {
          includePaths: ['src'],
        },
        watch: ['src'],
      }),
      url({
        include: ['**/*.png'],
        limit: 0,
        fileName: '[name][extname]',
        destDir: options.dir, // Use options.dir to determine the destination directory
      })
    );
    return config;
  },
};

globals.d.ts

declare module '*.png';

.babelrc.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "babel-plugin-inline-import"
  ]
}

package.json

{
  "version": "0.1.0",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "portshare-frontend-libary-components",
  "author": "Leon Salenbacher",
  "module": "dist/portshare-frontend-libary-components.esm.js",
  "size-limit": [
    {
      "path": "dist/portshare-frontend-libary-components.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/portshare-frontend-libary-components.esm.js",
      "limit": "10 KB"
    }
  ],
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@rollup/plugin-url": "^8.0.1",
    "@size-limit/preset-small-lib": "^8.2.4",
    "@storybook/addon-essentials": "^7.0.21",
    "@storybook/addon-interactions": "^7.0.21",
    "@storybook/addon-links": "^7.0.21",
    "@storybook/blocks": "^7.0.21",
    "@storybook/react": "^7.0.21",
    "@storybook/react-webpack5": "^7.0.21",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.5",
    "babel-plugin-inline-import": "^3.0.0",
    "file-loader": "^6.2.0",
    "husky": "^8.0.3",
    "node-sass": "^9.0.0",
    "portshare-frontend-libary-objects": "^1.0.8",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.9.0",
    "react-loading": "^2.0.3",
    "react-router-dom": "^6.13.0",
    "rollup-plugin-scss": "^4.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "size-limit": "^8.2.4",
    "storybook": "^7.0.21",
    "tsdx": "^0.14.1",
    "tslib": "^2.5.3",
    "url-loader": "^4.1.1"
  },
  "dependencies": {
    "react-simple-star-rating": "^5.1.7",
    "typescript": "^5.1.3"
  }
}
JavaScript

1条答案

按热度按时间
jgovgodb

jgovgodb1#

您遇到的错误似乎与TypeScript和Rollup设置中导入非JavaScript文件（如PNG图像）的配置有关。您可以采取以下几个步骤来解决此问题：
1.确保已安装必要的依赖项。您似乎已经安装了所需的软件包（@rollup/plugin-url、url-loader和file-loader）。
1.更新您的tsdx.config.js文件以包含以下更改：

const scss = require('rollup-plugin-scss');
const url = require('@rollup/plugin-url');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      scss({
        output: true,
        sass: require('sass'),
        sassOptions: {
          includePaths: ['src'],
        },
        watch: ['src'],
      }),
      url({
        include: ['**/*.png'],
        limit: 0,
        fileName: '[name][extname]',
        destDir: options.dir, // Use options.dir to determine the destination directory
        emitFiles: true, // Add this line to enable file emission
      })
    );
    return config;
  },
};

这里的修改是添加emitFiles: true选项，以便在使用@rollup/plugin-url插件时启用文件发射。
1.在项目的根目录中创建一个名为declarations.d.ts的文件（如果它不存在），并向其中添加以下声明：

declare module '*.png' {
  const value: string;
  export default value;
}

此声明告诉TypeScript，当您导入PNG文件时，它应该被视为字符串。
1.如果您使用的是自定义webpack配置，请确保配置了必要的加载器。对于PNG文件，需要适当配置url-loader和file-loader。以下是如何在webpack配置文件中配置这些加载器的示例：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  // ...
};

确保已安装加载器（url-loader和file-loader），并根据需要调整配置。
进行这些更改后，尝试使用npm run build再次构建项目，导入PNG文件的问题应该得到解决。

赞(0）分享  回复(0）举报  2023-06-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com