问题

Question

以前曾经问过，但有些事情让我感到困惑。

问题

我正在创建一个将由我的create-react-app模板使用的组件。因此，组件将构建两次。一旦创建组件，一次通过create-react-app创建。这适用于我的js，但对于CSS我不知道我应该如何捆绑我的CSS？

我应该在组件中使用带有uglification和minimalization的css-loader / style-loader吗？但是，这将为我添加到create-react-app的每个组件添加一个单独的css样式标记。
我是否应该使用内联样式和反应组件，因此根本没有样式表？ 反应内联样式可以执行普通css样式表可以执行的所有操作吗？
我是否应该向我发布的组件添加一个require（my.css），该组件被第一个Web包构建忽略但后来将由create-react-app处理？ 我该怎么做我尝试使用web包的ignore插件，但这只是删除了要求？如何保留代码但不使用webpack进行处理

这让我感到困惑的是安装组件。我这样做似乎：

npm install --save @mortonprod/react-product-component

它将拉取我的所有文件，然后在我的计算机上创建dist文件夹。

npm如何知道如何构建我的包？是否默认使用package.json中的构建脚本？
我应该以这种方式构建我的组件吗？我不应该只发布我的dist文件夹，所以npm install只是拉出dist目录吗？
npm是直接从GitHub中提取还是拥有自己的存储库？

提前致谢，我的设置在

设置

所以我有一个包含css / svg的react组件。我使用config：

'use strict';
const webpack = require('webpack');
const path = require('path');
module.exports =  {
  entry: {
        bundle: "./product.js"
    },
//  plugins: ["transform-react-jsx"],
  module:{
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader'
    },
        { test: /\.css$/, loader: 'css-loader' },
    {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
    }
  ]
  },
    output:{
    libraryTarget: 'umd',
    filename: 'index.js',   
        path: path.resolve(__dirname, 'dist')
    },
  resolve: {
    extensions: ['.js', '.jsx']
  },
}

我也可以使用我的package.json

{
  "name": "@mortonprod/react-product-component",
  "version": "1.2.0",
  "description": "This is a small react component to display product information",
  "main": "dist/index.js",
  "scripts": {
    "test": "npm run tests",
    "build": "./node_modules/.bin/webpack --progress"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mortonprod/react-product-component.git"
  },
  "keywords": [
    "react"
  ],
  "author": "Alexander Morton",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mortonprod/react-product-component/issues"
  },
  "homepage": "https://github.com/mortonprod/react-product-component#readme",
  "dependencies": {
    "react": "^15.6.1",
    "react-router-dom": "^4.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "svg-inline-loader": "^0.8.0",
    "webpack": "^3.4.1"
  }
}

我的组件

import React from 'react';
import {Link} from 'react-router-dom'
import "./product.css";
/**
    This is a product. It is composed of images which shows the product and information about that product. 
    Product information is passed to component to render.
    The main function of this component is to correctly render variable size images. We want to be able to display variables aspect ratio photos.
    All photos must have the same height or they will leave large gaps when grouped together. They also must be about 300px width for mobile.
    The product component must also have padding which is can expand into and centre into parent div.
    To achieve these needs set padding to 30px for product to expand into and margin auto by default. If device width is less than 500px then reduce height of
    image to 250px with max-width 300(This might leave some images with broken aspect ratio).
    -------------------------
    Must set product css to 100% width/height otherwise largest image will set the height of all other image. Strange?
    @function
*/
export default function Product(props){
    let price = null;
    if(props.price !== null && props.price !== ""){
        price = (
            <Link to={{
                    pathname: '/buy',
                    state: { 
                        title: props.title,
                        description:props.description,
                        img:props.src,
                        price:props.price,
                        info:props.info 
                    }
                }} 
                className={"product__link"} >
                <span> 
                    {props.price} 
                </span> 
            </Link>
        )
    }

    return (
        <div className={"product"}>
            <img src={props.src} className="product__image" alt="logo" />
            <div className={"product__info"}>
                 <h1 className={"product__name"}>{props.title} </h1>
                 <h4 className="product__description">{props.description} </h4>
                 <p className="product__descriptionLong">{props.info.description} </p>
                 {price}
            </div>
        </div>
    )
}

Product.defaultProps={
    title:"Test title",
    description:"This is the test description",
    img:null,
    price:"test price",
    info:{size:"test size",weight:"test weight"}
}

如何将反应组件与准备在npm上发布的资产捆绑在一起？

问题

设置

0 个答案: