[英]import in third party library breaks build
I have published a package which has the following file structure:我发布了一个 package 文件结构如下:
.
├── index.css
├── index.tsx
├── node_modules
├── package.json
└── yarn.lock
The index.tsx file is importing the index.css file as follows: index.tsx 文件正在导入 index.css 文件,如下所示:
import React from 'react'
import './index.css'
export const CustomComponent = ()=> {
return <span>Hello World</span>
}
The command tc
generate a build
directory.命令tc
生成一个build
目录。 Inside the package.json file, I have the following:在 package.json 文件中,我有以下内容:
{
...
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
"build/**/*",
],
...
}
Once my package is installed, you can se the same file structure as above in the project node_modules directory.一旦安装了我的 package,您可以在项目 node_modules 目录中设置与上述相同的文件结构。
Now the project where the package has been installed is failing to build because it doesn't recognize the path ./index.css
from the package index.tsx file.现在安装 package 的项目无法构建,因为它无法识别来自 package index.ts 文件的路径./index.css
8CBA22E28EB17B5F5C6AE2A266AZ
Any idea how to solve this?知道如何解决这个问题吗?
It doesn't work since the file index.css
does not exist in the root of your package, but instead under build/index.css
.它不起作用,因为文件index.css
在 package 的根目录中不存在,而是在build/index.css
下。
when you publish a package using npm publish
, it maintains the folder structure.当您使用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. 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.
To solve this, either import from mypackage/build/index.css
(which is less ideal), or call npm publish
from inside your build
folder instead of from the parent folder.为了解决这个问题,要么从mypackage/build/index.css
(不太理想),要么从build
文件夹中调用npm publish
,而不是从父文件夹中发布。
I solved this by using Rollup.我通过使用 Rollup 解决了这个问题。 Check out the rollup, typescript configs and package.json file below:查看汇总,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",
}
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.