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

Posted

技术标签:

【中文标题】在新 CRA 中使用 babel 转译包后 CSS 和图像文件未出现【英文标题】:CSS and Images files not coming after transpiling package with babel in new CRA 【发布时间】:2020-06-13 20:38:16 【问题描述】:

我将 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"
  

【问题讨论】:

你是如何通过 Create-React-app CLI 或从头开始创建你的 react 项目的?我只是不明白您的问题,您是否正确地在组件中导入了这些 css 文件和图像?您是否尝试过在不更改默认配置的情况下使用 CRA 创建新项目来实现相同的目标?? 您是如何加载图像和 CSS 的? CSS 模块?使用进口?在 CSS 中使用 url()? 看来您正在使用 create-react-app(来自 react-scripts)。您的 Webpack 配置将被忽略,它将使用 CRA 自己的 Webpack 配置。 我有 4.41 版本的 webpack 和 7.8 版本的 babel。我将 CSS 导入为 import './style.css';和 CSS 中的图像作为背景 URL。我想要的是制作一个包,将其发布到 npm 而无需构建,然后将其安装到新的 CRA 中并在那里使用它。 ***.com/questions/60077150/…。从这里我知道现在要使用已安装的软件包,我必须对其进行转译。但问题是我的 js/jsx 正在从 ES6 转译到 ES5,但图像和 CSS 没有进入新的转译文件夹。 【参考方案1】:

好的,如果你想发布一个组件库,那么网上有很多可用的教程,如果你的具体问题是无法发布你的静态资源,例如 css imagesscss 等您可以将 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 时手动将您的静态资产复制到所需位置

【讨论】:

【参考方案2】:

您应该在导入 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 存储库。我会看看。

【讨论】:

您希望我在使用已发布包的新 CRA 应用程序或包本身中进行这些更改。【参考方案3】:

您应该使用file-loader 加载图像文件和css-loader 加载您的css 文件。

你的 webpack 将知道如何处理你的文件

如果您使用 create-react-app 创建了项目。在这种情况下,您只需要将 CSS 文件和图像文件导入组件。

【讨论】:

我正在使用 babel 编译文件,而不是通过 webpack 构建它。所以我不相信你的回答适用于我的问题。无论如何,谢谢。

以上是关于在新 CRA 中使用 babel 转译包后 CSS 和图像文件未出现的主要内容,如果未能解决你的问题,请参考以下文章

babel入门&文件转译

babel入门&文件转译

Babel / Rollup 错误转译和捆绑 ES2017

使用 Babel.js 转译 Async Await 提案?

使用 Chrome Devtools 调试 Babel 转译的 React 时,“this”的值不正确

在客户端使用 Babel 进行转译、导入和导出,不用 Webpack?