Используя ES6 React Lib, которую я создал с Babel и Rollup на сайте Gatsby - PullRequest
Новая
       48

Используя ES6 React Lib, которую я создал с Babel и Rollup на сайте Gatsby

0 голосов
/ 01 апреля 2020

Я создал простой 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 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

вы получите следующие ошибки: Что здесь происходит? На самом деле я не вижу никаких полезных сообщений об ошибках, кроме вещей с линтером, которые я просто веду в тупик. Есть мысли?

1 Ответ

0 голосов
/ 07 апреля 2020

Мне удалось исправить ошибки, удалив UMD-часть моей библиотеки:

из rollup.config.js удалено: 

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

и из package.json удалено: 

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