我将 CSS 导入为 import './style.css';以及 CSS 中具有背景 URL 属性的图像。我想要的是制作一个包，将其发布到 npm 而无需构建，然后将其安装到新的 CRA 中并在那里使用它。 Using self made npm package in react. Failed to compile 。从这里我知道现在要使用已安装的软件包我必须转译它。但问题是我的 js/jsx 正在从 ES6 转换为 ES5，但图像和 CSS 不会进入新的转换文件夹。
详细信息 我在 Reactjs 中制作了一个包，但在发布源代码后无法使用它，而不是进行构建。 然后我在上面发布了一个问题:Using self made npm package in react. Failed to compile .
现在我可以按照已接受答案中的步骤来使用它，即使用 babel 转译 ./src 。
我仍然遇到的问题是我没有在新的转译位置(即 ./lib/src)中获取 CSS 和图像。如果我将所有图像和CSS文件夹复制到./lib/src中的相应位置。它有效，但我不想手动执行。
有关如何实现此目标的任何建议。
WEBPACK.CONFIG.JS
module.exports = {
overrides: [
{
test: ["./node_modules/<component_name>"],
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"]
}
]
};
PACKAGE.json
{
"name": "package-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.8.3",
"@material-ui/core": "^1.5.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"active-event-stack": "^1.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-webpack-loaders": "^0.9.0",
"classnames": "^2.2.3",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"material-ui": "^0.20.0",
"path": "^0.12.7",
"prop-types": "^15.6.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-draggable": "^2.2.6",
"react-onclickoutside": "^5.10.0",
"react-redux": "^7.1.3",
"react-resizable": "^1.7.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^3.7.2",
"style-loader": "^1.1.3",
"styled-components": "^4.3.2",
"url-loader": "^3.0.0",
"wolfy87-eventemitter": "^5.2.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.8.4"
}
}
最佳答案
好吧，如果您想发布组件库，那么网上有很多教程，如果您的具体问题是无法发布静态资源，例如 css images和scss等等然后你可以只附加一个 cp命令(linux 和 macos)到您的构建脚本
"scripts": {
"build": "babel src --out-dir lib --ignore src/__tests__/ && cp -R src/assets lib/",
},
请注意命令 cp -R src/assets 结尾处的这一点这将在您运行时手动将静态资源复制到所需位置 npm run build
关于reactjs - 在新的 CRA 中使用 babel 转译包后 CSS 和图像文件不会出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60473782/