在第三方库中导入会破坏构建

Question

我发布了一个 package 文件结构如下：

.
├── index.css
├── index.tsx
├── node_modules
├── package.json
└── yarn.lock

index.tsx 文件正在导入 index.css 文件，如下所示：

import React from 'react'
import './index.css'

export const CustomComponent = ()=> {
   return <span>Hello World</span>
}

命令tc生成一个build目录。 在 package.json 文件中，我有以下内容：

{
...
"main": "./build/index.js",
  "types": "./build/index.d.ts",
  "files": [
    "build/**/*",
  ],
...
}

一旦安装了我的 package，您可以在项目 node_modules 目录中设置与上述相同的文件结构。

现在安装 package 的项目无法构建，因为它无法识别来自 package index.ts 文件的路径./index.css 8CBA22E28EB17B5F5C6AE2A266AZ

知道如何解决这个问题吗？

Answer 1

它不起作用，因为文件index.css在 package 的根目录中不存在，而是在build/index.css下。

当您使用npm publish package 时，它会维护文件夹结构。 The main in package.json simply points to the default file in your package, it doesn't make /build the root folder of your package.

为了解决这个问题，要么从mypackage/build/index.css （不太理想），要么从build文件夹中调用npm publish ，而不是从父文件夹中发布。

Answer 2

我通过使用 Rollup 解决了这个问题。 查看汇总，typescript 配置和 package.json 文件如下：

// tsconfig.json

{
   "compilerOptions": {
     "jsx": "react",
     "target": "es5",
     "module": "esnext",
     "sourceMap": true,
     "allowJs": false,
     "moduleResolution": "node",
     "declaration": true,
     "outDir": "build",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
     "lib": ["es6", "dom", "es2016", "es2017"]
   },
   "include": ["src"],
   "exclude": ["node_modules", "build"]
 }

// rollup.config.js

import typescript from "rollup-plugin-typescript2";
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import postcss from 'rollup-plugin-postcss';
import json from '@rollup/plugin-json';
import nodeExternal from '@yelo/rollup-node-external';

import pkg from "./package.json";

export default {
   input: "src/index.ts",
   output: [
      {
         file: pkg.main,
         format: "cjs",
         exports: "named",
         sourcemap: true
      },
      {
         file: pkg.module,
         format: "es",
         exports: "named",
         sourcemap: true
      }
   ],
   plugins: [
      external(),
      resolve(),
      typescript({
         rollupCommonJSResolveHack: true,
         exclude: "**/__tests__/**",
         clean: true
      }),
      commonjs({
         include: ["node_modules/**"],
         exclude: ["./src/index.css"],
         namedExports: {
            "node_modules/react/react.js": [
               "Children",
               "Component",
               "PropTypes",
               "createElement"
            ],
            "node_modules/react-dom/index.js": ["render"]
         }
      }),
      json(),
      postcss({
         plugins: []
       })
   ],
   external: nodeExternal()
};

// package.json

{
...

"main": "build/index.js",
"types": "./build/index.d.ts",
"files": [
    "build/**/*"
],
"module": "build/index.es.js",
"jsnext:main": "build/index.es.js",
"scripts": {
   "build": "rollup -c",
}
...
}