打包 react 组件

Question

目标：

希望写一个简单的 react 组件，打成 npm 包，其他项目直接通过 npm 安装过后通过 import 直接就能在 jsx 中使用

当前操作：

新建了一个 npm package，然后在 package.json 中指定 main 字段到指定 js 文件，js 文件中代码为：

import React, { Component } from 'react';

export default class extends Component {
    render () {
        return (
            <div>
                this is a simple component
            </div>
        )
    }
}

然后通过 create-react-app 创建了一个 react 项目，用 npm ln 将这个包链接到项目中，然后在 App.js 中使用 import 引入：

import React, { Component } from 'react';
import SimpleComp from 'react-comp';
import './App.css';

console.log(Cxxxx)
class App extends Component {
  render() {
    return (
      <div className="App">
        <SimpleComp />
      </div>
    );
  }
}

export default App;

然后直接报错：

如果用 webpack 在组件包里面使用 babel-loader 转 jsx 语法过后，打包出来的 dist 会包含当前项目里面的react 依赖吧，人家使用的时候又会导致代码重复，请问我该怎么直接 export jsx 组件呢，如果不能的话需要怎么做呢，我现在的需求就是开发一个 react 插件，无奈 react 和 webpack 都是新手！！ 泪奔 ~

Answer 1

组件打包的时候直接使用babel转译然后发布就好了，babel转译只是把某个文件的语法转化一下，比如jsx转化成js，es6转化成es5之类的，不会将依赖代码打包进结果中。

• .babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "> 0.25%, not dead"
      }
    ],
    "@babel/react"
  ]
}

• 使用babel转译

babel -d dist libs

• 源码

import React from 'react'

class ScrollView extends React.Component{
    render() {
        return (<div>
            scroll view
        </div>)
    }
}

export default ScrollView

• 翻译后(一大坨，省略一些)

function (_React$Component) {
  _inherits(ScrollView, _React$Component);

  function ScrollView() {
    _classCallCheck(this, ScrollView);

    return _possibleConstructorReturn(this, _getPrototypeOf(ScrollView).apply(this, arguments));
  }

  _createClass(ScrollView, [{
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, "scroll view");
    }
  }]);

  return ScrollView;
}(_react.default.Component);

var _default = ScrollView;
exports.default = _default;

• 源码仓库（开的一个简单的）

https://github.com/followWinter/react-better-scroll.git

Answer 2

我觉得这个可以帮助你，让你构建自己的组件上传到 npm
https://github.com/allan2code...