재사용 가능한 반응 라이브러리에서 종속성을 관리/패키지하는 방법

Question

나는 material-ui과 react-google-charts과 다른 타사 라이브러리를 사용하는 나의 첫 번째 reactjs 라이브러리를 만들었습니다. 나는

const webpack = require('webpack') 
const path = require('path') 

const BUILD_DIR = path.resolve(__dirname, 'lib') 
const APP_DIR = path.resolve(__dirname, 'src') 

const WebpackConfig = { 

    entry: { 
     app: APP_DIR + '/index.js', 
    }, 
    output: { 
     path: BUILD_DIR, 
     filename: 'index.js', 
     libraryTarget: 'umd', 
     library: 'TestComponent' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       test: /.js$/, 
       exclude: /node_modules/, 
       include : APP_DIR, 
       options: { 
        presets: [ 'react', 'es2015', 'stage-2' ] 
       } 
      } 
     ], 
    }, 
} 

// webpack production config. 
if (process.env.NODE_ENV === 'production') { 

    WebpackConfig.externals = { 
     'react': 'react', 
     'react-dom': 'react-dom' 
    } 

    WebpackConfig.plugins = [ 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      beautify: false, 
      mangle: { 
       screw_ie8: true, 
      }, 
      compress: { 
       warnings: false, 
       screw_ie8: true 
      }, 
      comments: false 
     }), 
    ] 
} 

module.exports = WebpackConfig 

생산에서, 나는 '외관'나는 돈 때문에 같은 react 및 react-dom을 표시 한 ... 지금까지 내가 webpack.config.js 다음 파일을 한 내 들러와 같이 웹팩 (버전 3.5.6)를 사용하고 있습니다 그것들을 내 라이브러리에 묶어두기를 원한다면 어떤 프로젝트라도이 프로젝트를 사용하게 될 것이라고 가정하는 것이 안전 할 것입니다. reactjs.

이 라이브러리를 사용중인 프로젝트에 존재하거나 존재하지 않을 수있는 다른 타사 라이브러리는 어떻게 처리합니까? 번들에서 모든 타사 라이브러리를 제외해야합니까? 그렇다면 내 라이브러리를 사용하는 프로젝트를 확인하는 방법은 내 라이브러리에서 찾을 수 있습니까?

Answer 1

난 당신이 package.json 파일이 있고 이미 필요한 의존성

타사 라이브러리를 다루는 방법의

하나는 내가 모든 제 3 자 라이브러리를 추가 선호, 별도의 파일을 생성하는 것입니다 설치되어 있다고 가정하고 배열이 같은 진입 점을 제공하는 (당신은 적절하게 수정할 수 있습니다) : bundle.js (선택 함)에 포함하지 않는다,

const VENDOR_LIBS = [ 'react', 'react-dom', 'react-router' ] 
    entry: { 
    bundle: 'index.js', 
    vendor: VENDOR_LIBS 
    } 

그리고 공급 업체에 어떤 확인하기 위해, 당신은 할 수 있습니다 플러그인 내부에 CommonsChunkPlugin 사용 :

당신은 출력 개체 내부 [chunkhash]의 사용을 할 수 있도록이 settting으로

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor' 
    }); ] 

두 개의 파일을 방출한다 (당신은 적절하게 수정할 수 있습니다) :

output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].[chunkhash].js' 
    }, 

당신은 Webpack Documentation Code Splitting

만약에 더 읽을 수 있습니다 npm 의존성에 대해 더 알고 싶다면, npm-documentation