在新的 CRA 中使用 babel 转译包后没有出现 CSS 和图像文件

Question

我将 CSS 导入为 import './style.css'; 和带有背景 URL 属性的 CSS 中的图像。我想要的是制作一个包，将其发布到 npm 而无需构建，然后将其安装到新的 CRA 中并在那里使用。在反应中使用自制的 npm 包。编译失败。从这里我知道要使用已安装的软件包，现在我必须对其进行转译。但问题是我的 js/jsx 正在从 ES6 转换为 ES5，但图像和 CSS 没有进入新的转换文件夹。

详细信息 我在 Reactjs 中制作了一个包，但在发布源代码后无法使用它，而不是通过构建. 然后我在上面发布了一个问题：在反应中使用自制的 npm 包。编译失败。

现在我可以按照接受的答案中的步骤使用它，即通过使用 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"]
    }
  ]
};

包.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"
  }
}

Answer 1

好吧，如果你想发布一个组件库，那么网上有很多教程，如果你的具体问题是无法发布你的静态资源，例如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