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

【问题标题】：import in third party library breaks build在第三方库中导入会破坏构建
【发布时间】：2021-03-07 06:23:48
【问题描述】：

我已经发布了一个具有以下文件结构的包：

.
├── 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/**/*",
  ],
...
}

安装完我的包后，你可以在项目 node_modules 目录中设置与上面相同的文件结构。

现在安装包的项目无法构建，因为它无法识别包 index.tsx 文件中的路径 ./index.css。

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

【问题讨论】：

标签： reactjs node-modules es6-modules

【解决方案1】：

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

当您使用npm publish 发布包时，它会维护文件夹结构。 package.json 中的 main 只是指向包中的默认文件，它不会使 /build 成为包的根文件夹。

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

【讨论】：

我通过使用 Rollup 捆绑器解决了这个问题

【解决方案2】：

我通过使用 Rollup 解决了这个问题。查看下面的汇总、打字稿配置和 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",
}
...
}

【讨论】：