npm啟動時react組件模塊未在其自己的目錄中呈現

Question

TLDR：npm start不呈現組件

因此，在開發可分發的React組件時，我對文件夾結構有些困惑。

我希望能夠在模塊目錄本身中演示我的模塊，以及能夠在另一個應用程序中分發該組件。

這是我當前的目錄

目前npm start給我這個

這是我的webpack配置

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' // u sorta need this

  },
  module: {
    rules: [
      {
        test: /\.js$/,

        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: { 
            presets: ['@babel/preset-env', '@babel/react'],
            plugins:['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
//  public directory will render the component.
  devServer: {
    contentBase: __dirname  + './dist',
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true
  },

};

dist / index.js

import React from "react";
import ReactDOM from "react-dom";
import Fetch from '../src';

const App = () => (
    <div>
        <Fetch/>
    </div>
)

ReactDOM.render(<App />, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>

 </body>
</html>

和src / index.js

import Fetch from './Fetch';

export default Fetch;

Answer 1

使用故事書進行演示並記錄可重復使用的組件。 更好的方法是通過向每個組件中添加.stories.js文件來在組件級別創建故事。

結帳： https : //storybook.js.org/ 。

對於文件夾結構，您可以從create-react-app開始，它為您提供了構建，運行和測試所需的所有功能。

結帳： https : //github.com/facebook/create-react-app

npm啟動時react組件模塊未在其自己的目錄中呈現

問題描述

1 個解決方案

解決方案1
0 2019-06-30 20:21:31

npm啟動時react組件模塊未在其自己的目錄中呈現

問題描述

1 個解決方案

解決方案1 0 2019-06-30 20:21:31

解決方案1
0 2019-06-30 20:21:31