CSS и файлы изображений не приходят после переноса пакета с babel в новый CRA - PullRequest
Новая
       9

CSS и файлы изображений не приходят после переноса пакета с babel в новый CRA

4 голосов
/ 01 марта 2020

Я импортирую CSS как импорт './style.css'; и изображения в CSS с фоновым свойством URL. Я хочу сделать пакет, опубликовать sh на npm без сборки, а затем установить его в новый CRA и использовать там. Используя самодельный npm пакет в реакции. Не удалось скомпилировать . Отсюда я узнал, что для использования этого установленного пакета теперь мне нужно его перенести. Но проблема в том, что мои js / jsx переносятся из ES6 в ES5, но изображения и CSS не попадают в новую перенесенную папку.

ДЕТАЛИ Я сделал пакет в Reactjs и не смог использовать его после публикации исходного кода, не сделал сборку . Тогда я отправил вопрос на это: Используя сам сделанный npm пакет в реакции. Не удалось скомпилировать .

Теперь я могу использовать его, выполнив шаги в принятом ответе, т. Е. Путем переноса ./src с использованием babel.

Проблема, по которой Я все еще застрял в том, что я не получаю свои CSS и изображения в новом трансплантированном местоположении, т.е. ./lib/src. Если я скопирую все изображения и папки 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"
  }
}

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Вы должны использовать file-loader для загрузки файлов изображений и css -loader для загрузки файлов css.

Ваш веб-пакет будет знать, как обращаться с вашими файлами

Если вы создали свой проект с помощью create-реагировать-приложение. В этом случае вам просто нужно импортировать файл CSS и файл изображения в ваши компоненты.

0 голосов
/ 07 марта 2020

Это следует сделать при импорте 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")
    })
  ]
};

и отредактируйте ваш .babelr c так, чтобы он содержал только: 

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

и ваш пакет. json должен перечислите эти dev-зависимости:

@ babel / core,@babel/node,@babel/plugin-proposal-class-properties,@babel/preset-env,@babel/preset-react, babel-jest, babel-loader, css -loader, file-loader, html - webpack-plugin, path, style-loader, webpack, webpack-cli, webpack-dev-server

Если это не поможет, вставьте ссылку на репозиторий github. Я посмотрю.

...