Question

我在项目中创建了一个React组件，我想在多个项目中使用它。目前，我只关心在本地和发展中做这件事。 React组件被渲染到根div中，项目使用webpack和babel将JSX，ES6和一些ES7特性转换成一个包。

我认为导出这个组件会很简单，这样我就可以运行npm install MyComponent并开始在新项目中使用它。但是，我发现它并非如此直截了当。特别是，我已经阅读了几个小时和几个小时，似乎只是变得更加困惑。

如果我的最终目标是继续开发'MyComponent＆＃39;在其包含的项目中，使用＆＃39; MyComponent＆＃39;在任何其他本地项目中，我有哪些选择？我做的第一件事就是将main的{{1}}密钥更改为package.json并运行/src/components/MyComponent。这会生成一个npm pack文件，我可以通过其绝对文件路径安装在其他项目中。但是，我发现es6和jsx没有被编译，因此我的客户端项目无法解析tgz。然后我使用webpack转换为MyComponent，但是当我lib/MyComponent时，我只在控制台中看到import MyComponent from './path/to/MyComponent-1.0.0.tgz（一个空对象）。

寻找我的问题的解决方案出现了许多不同的方法，将NPM，Grunt，Gulp，Babel，Webpack等组合在一起。而且我担心在我研究它之前会有更多的小时（几天？）可以理解的事情。

根据我的要求，我可以实现的最简单的解决方案是：1）将我的React组件编译成最简单的导入模块2）将其导入任何本地项目3）继续在原始主机项目中开发包变更很容易传播到客户项目。

Answer 1

一般情况下，如果您要开始创建React组件作为独立的包（由于您已经提到的所有原因，这是一个很好的模式） - 您是需要至少熟悉webpack和babel。在这里学到了很多东西，但是让我试着指出你正确的方向：

// webpack.config.js

/* eslint-disable */
const path = require('path')
const webpack = require('webpack')

const ENVIRONMENT = process.env.NODE_ENV
const PRODUCTION = ENVIRONMENT === 'production'
const SOURCEMAP = !PRODUCTION || process.env.SOURCEMAP

const library = 'your-lib-name' // << RENAME THIS <<
const filename = PRODUCTION ? `${library}.min.js` : `${library}.js`

const plugins = []

if (PRODUCTION) {
  plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(ENVIRONMENT),
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      output: { comments: false, semicolons: false },
      sourceMap: SOURCEMAP,
    })
  )
}

module.exports = {
  devtool: SOURCEMAP ? 'source-map' : 'none',
  entry:  `${__dirname}/path/to/your/component.js`, // << RENAME THIS <<
  externals: {
    'react': 'react',
    'react-dom': 'react-dom',
  },
  module: {
    loaders: [{
      test:    /\.js$/,
      loader:  'babel-loader',
      exclude: /node_modules/,
    }],
  },
  output: {
    filename,
    library,
    path:           `${__dirname}/lib`,
    libraryTarget:  'umd',
    umdNamedDefine: true,
  },
  plugins,
}

我知道这看起来像一堆 - 但它处理了你想要的大部分内容。具体来说：

如果您在构建时指定NODE_ENV=production，则会对您的包裹进行整理/缩小，并进行其他一些您可能需要的修剪。
使用此脚本构建将输出sourcemap，您可以使用dev工具在调试器窗口中检查缩小的代码等。
这会将react和react-dom标记为externals - 这意味着他们不会捆绑在的捆绑包中。这很棒 - 因为这意味着您已经获得了react个文件大小的2份以上，因为您已import编辑了自己的组件！

要使用它，你现在需要一些package.json爱。

package.json

{
  "name": "Your Name",
  "version": "0.0.1",
  "description": "This is my awesome react package!",
  "main": "path/to/your/component.js",
  "author": "Your Name",
  "license": "MIT",
  "repository": { /* Your Repo Info Here */ },
  "dependencies": {
    "any-packages-you-need-included-in-builds": "^1.0.0"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "prop-types": "^15.5.10",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0"
  },
  "scripts": {
    "build": "yarn prebuild && NODE_ENV=production webpack",
    "prebuild": "mkdir -p ./lib && rm -rf ./lib/*"
  }
}

显然，如果你需要它，你可以在这里有更多 - 比如你在转换中使用的其他babel-plugin-*插件，其他包等。但是这个集合将允许你的webpack构建跑。请注意，此处的脚本假定您正在使用yarn - 这样您就可以运行yarn build，并且您可以在posix系统上运行mkdir。如果您使用的是yarn或不使用npm，请相应地更新脚本。

其余的只是学习将包发布到version或其他包存储库。主要是，只需将package.json中的npm version号码设置为新的（npm publish），然后发布（npm）。当然，您必须拥有npm login帐户才能登录（npm）。

一旦您发布到yarn add your-package-name，您就可以react。

请记住，我们将react-dom和external标记为window.React - 所以在使用广告资源中，您需要确保它们可用{ {1}}和window.ReactDOM - 或者您需要直接从node_modules/your-package-name/path/to/your/component.js

Answer 2

您无需npm pack包即可使用它。如果你把你的组件变成一个git repo并把它放在Github上，你可以使用NPM直接从Github安装它，使用npm install alex/mycomponent alex是你的github用户名，而mycomponent是回购品名称。重新运行该命令将从Github重新安装，以防您对repo进行更改。

如果您对组件感到满意，可以将其上传到NPM注册表，以便像安装任何其他软件包一样进行安装（npm install name）。首先使用Github使开发更容易。

默认情况下，Webpack可能无法从node_modules编译内容。通常，软件包在发布之前都是预先编译的，但您应该能够配置webpack来构建“打包”组件以及应用程序的其余部分。也许这会有所帮助：https://stackoverflow.com/a/38008149/7486612

Answer 3

首先查看现有的组件库，例如Material UI。具体检查他们有的npm脚本（参见package.json）：

"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build": "npm run build:es2015 && npm run build:es2015modules && npm run build:copy-files && npm run build:umd:dev && npm run build:umd:prod",

这是非常复杂且高质量的组件库的示例，它确保无论您的构建管道如何，您都可以使用它。

使用webpack设置构建过程可能很麻烦，但是从一开始就不要过于专注，并且覆盖最直接的案例。

在处理组件时，请查看https://storybook.js.org/。