打包反應組分庫的正確方法？

現在，我工作的一個陣營的組件庫，我想通過NPM交付給儘可能多的人越好。我使用webpack和babel進行打包和處理我的代碼。然而，對於webpack來說，這是一個相當新的東西，我不知道什麼是最好的方式來打包我的庫。打包反應組分庫的正確方法？

我計劃必須在src文件夾中，這將是各個組件文件的列表。我如何去打包它們讓人們從npm抓取？我的猜測是單獨輸出它們，以便人們可以導入他們需要的任何東西。但是，我希望他們能夠使用ES5（我認爲babel與我已安裝的es2015預設有關）。我的文件如下：

webpack.config.js（一對夫婦的事情是爲簡潔，刪除）

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     Component1: __dirname + '/src/Component1.js', 
     Component2: __dirname + '/src/Component2.js' 
    }, 
    output: { 
      path: __dirname + '/dist', 
      filename: '[name].js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: 'babel-loader', 
      query: { 
        presets: ['react', 'es2015'] 
      } 
     }] 
    } 
};

Component1.js（樣品組件，書面向人們展示一個例子）

import React from 'react'; 


export default class Component1 extends React.Component { 
    render() { 
    return React.createElement('p',{className : 'Component1'}, 'This is a test component.'); 
    } 
}

通過webpack運行後，我得到很多由它增加了開銷代碼一個巨大的文件，但是，從我所知道的，代碼被編譯到ES5，W這是我的意圖。這是做這件事的正確方法嗎？我可以避免由webpack添加的開銷嗎？

我試着用搜索引擎尋找答案，但我發現的文章（this和this爲主）是有點過時和/或要求我用一些插件webpack，這我不是很舒服呢。我想了解我應該做什麼以及爲什麼。提前致謝！

來源

2017-05-29 Angelos Chalaris

這是一個很大的問題和事情，我同意應涵蓋了很多。爲了您的手頭的具體問題：

react-npm-boilerplate上githhub
This article詳細地介紹

來源

2017-05-29 19:43:13

大資源，他們兩個。根據我的理解，我實際上並不需要webpack來構建包，我應該只使用'babel'。同時，如果我決定不使用測試，我不需要任何東西來編譯我的組件庫，除了'babel'和我正在使用的兩個預設，對嗎？ –

不，你並不需要webpack，但沒有理由不使用它。我會建議使用任何你喜歡的構建系統。與NPM包最重要的事情是確保您的package.json文件中有一個主項指向的任何文件是你的出口和/或在根目錄下，其可以再出口，通常是什麼在你的index.js文件lib或dist目錄。您剛纔提到有很多開銷中的WebPack的，這聽起來像你需要建立在生產模式，尤其是對於反應：HTTPS：//webpack.js。org/guides/production-build/ – 2017-05-30 01:49:44

再次感謝您的回答和澄清。經過多方考慮，我可能會在發佈之前直到最後一分鐘才放棄webpack，因爲它已經導致我因內存問題而導致無數問題和崩潰。如果我可以用Babel構建和運行所有的東西，直到我準備發佈對我來說很好的東西。 –

的GitHub的網站的想法你可以做與供應商的模塊。

 

    var webpack = require('webpack'); 

    module.exports = { 
     entry: { 
      Component1: __dirname + '/src/Component1.js', 
      Component2: __dirname + '/src/Component2.js', 
      vendor: ['react'], 
     }, 
     output: { 
       path: __dirname + '/dist', 
       filename: '[name].js' 
     }, 
     module: { 
      loaders: [{ 
       test: /\.js$/, 
       loader: 'babel-loader', 
       query: { 
         presets: ['react', 'es2015'] 
       } 
      }] 
     } 
     plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({ 
       name: "vendor", 
       minChunks: Infinity 
      }) 
     ] 
    };

你得到一個文件vendor.js其中將反應在這裏

詳細https://webpack.github.io/docs/code-splitting.html

來源

2017-05-29 20:01:02

我在理解這個過程中遇到了一些麻煩。你能解釋一下嗎？ –

Reactjs從Component1和Component2排除到文件vendor.js。 Component1和Component2將僅在反應時連接。 – 2017-05-29 20:15:27

打包反應組分庫的正確方法？

回答

相關問題