我正在将CSS导入为import'./style.css';和具有背景URL属性的CSS中的图像。我想要的是制作一个软件包,将其发布到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"
}
}
答案 0 :(得分:2)
好的,如果你想发布一个组件库,那么网上有很多教程,如果你的具体问题是无法发布你的静态资源,比如 css
images
和 { {1}} 等,然后您可以将 scss
命令(linux 和 macos)附加到您的构建脚本
cp
在命令 "scripts": {
"build": "babel src --out-dir lib --ignore src/__tests__/ && cp -R src/assets lib/",
},
的末尾注意这一点,这会在您运行 cp -R src/assets
时手动将静态资产复制到所需位置npm run build
答案 1 :(得分:0)
您应使用file-loader加载图像文件,并使用css-loader加载CSS文件。
您的Webpack将随后知道如何处理文件
如果您使用create-react-app创建了项目。在这种情况下,您只需要将CSS文件和图像文件导入到组件中即可。
答案 2 :(得分:0)
您应该在导入CSS文件时执行此操作:
import './style.css';
如果您想从头开始创建它。
在webpack.config.js中,插入其中(根据您的文件夹结构更改路径):
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, "build"),
filename: "index.bundle.js"
},
mode: process.env.NODE_ENV || "development",
resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
devServer: {
contentBase: path.join(__dirname, "src"),
hot: true,
port: 3000
},
module: {
rules: [
{
// this is so that we can compile any React,
// ES6 and above into normal ES5 syntax
test: /\.(js|jsx)$/,
// we do not want anything from node_modules to be compiled
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css|scss)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
loaders: ["file-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html")
})
]
};
并编辑.babelrc以仅包含以下内容:
{
"presets": ["@babel/env", "@babel/react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
您的package.json也应列出以下开发依赖项:
@ babel / core,@ babel / node,@ babel / plugin-proposal-class-properties,@ babel / preset-env,@ babel / preset-react,babel-jest,babel-loader,css-loader,文件加载器,html-webpack-plugin,路径,样式加载器,webpack,webpack-cli,webpack-dev-server
如果这没有帮助,请将链接粘贴到您的github存储库中。我会看看。