使用我在 Gatsby 网站上用 Babel 和 Rollup 创建的 ES6 React Lib

Question

我创建了一个简单的 React Lib，它使用componentDidMount将外部脚本注入到 dom 中，如下所示：

import { Component } from "react"

class Embed extends Component {
  componentDidMount () {
    const script = document.createElement("script")
    script.async = true
    script.src = "https://cdn.mysite.com/embed.js"
    document.head.appendChild(script);
  }

  render() {
    return null
  }
}

export default Embed

这个文件在src/components/Embed.js

然后在src/index.js我有：

import Embed from './components/Embed'
export default Embed

我的package.json看起来像这样：

{
  "name": "my-embed-js",
  "version": "1.3.0",
  "description": "A react wrapper for my embed script",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepublish": "rm -rf ./dist && npm run build"
  },

  "keywords": [],
  "author": "Me",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.0",
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "rollup": "^2.3.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.2"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

我的.babelrc很简单：

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

在我的rollup.config.js文件中：

import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import babel from 'rollup-plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import pkg from './package.json'

const INPUT_FILE_PATH = 'src/index.js';
const OUTPUT_NAME = 'MyEmbedJs';

const PLUGINS = [
  peerDepsExternal(),
  babel({
    exclude: 'node_modules/**',
  }),
  resolve({
    browser: true,
  }),
  commonjs()
]

const GLOBALS = {
  react: 'React',
  'react-dom': 'ReactDOM',
}

const OUTPUT_DATA = [
  {
    file: pkg.browser,
    format: 'umd',
  },
  {
    file: pkg.main,
    format: 'cjs',
  },
  {
    file: pkg.module,
    format: 'es',
  },
]

const config = OUTPUT_DATA.map(({ file, format }) => ({
  input: INPUT_FILE_PATH,
  output: {
    file,
    format,
    name: OUTPUT_NAME,
    globals: GLOBALS,
  },
  plugins: PLUGINS,
}))

export default config

当我将它包含在标准反应项目中时，这一切正常：

import Embed from 'my-embed-js'

const App = () => (
  <Embed />
  {...otherComponents}
)

但是当我将它包含在我的 gatsby 项目中时，我在尝试运行gatsby develop时遇到如下错误

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/libs/my-embed-js/dist/index.js
   2:3   error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
   3:35  error    'define' is not defined                                                no-undef
   3:48  error    'define' is not defined                                                no-undef
   4:23  error    Unexpected use of 'self'                                               no-restricted-globals
   5:29  warning  'use strict' is unnecessary inside of modules                          strict
  45:5   warning  '_getPrototypeOf' is a function                                        no-func-assign
  52:5   warning  '_setPrototypeOf' is a function                                        no-func-assign

✖ 7 problems (4 errors, 3 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


File: ../libs/my-embed-js/dist/index.js

failed Building development bundle - 5.559s

这里发生了什么？ 除了那些让我陷入死胡同的 linter 内容之外，我真的没有看到任何有用的错误消息。 有什么想法吗？

Answer 1

我能够通过删除我的库的 UMD 部分来修复错误：

从rollup.config.js删除：

  {
    file: pkg.browser,
    format: 'umd',
  },

并从package.json删除：

"browser": "dist/index.js",