使用我在 Gatsby 网站上使用 Babel 和 Rollup 创建的 ES6 React Lib
Using an ES6 React Lib I've created with Babel and Rollup on Gatsby site
我创建了一个简单的 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
当我将其包含在标准 React 项目中时,一切正常:
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 内容之外,我没有看到任何有用的错误消息。有什么想法吗?
我能够通过删除我的库的 UMD 部分来修复错误:
从 rollup.config.js
删除:
{
file: pkg.browser,
format: 'umd',
},
并从 package.json
移除:
"browser": "dist/index.js",
我创建了一个简单的 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
当我将其包含在标准 React 项目中时,一切正常:
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 内容之外,我没有看到任何有用的错误消息。有什么想法吗?
我能够通过删除我的库的 UMD 部分来修复错误:
从 rollup.config.js
删除:
{
file: pkg.browser,
format: 'umd',
},
并从 package.json
移除:
"browser": "dist/index.js",