我创建了一个简单的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
这里发生了什么?除了皮棉绒的东西以外,我没有看到任何有用的错误消息,这些东西只是使我陷入困境。有什么想法吗?
我创建了一个简单的React Lib,它使用componentDidMount将外部脚本注入dom中,如下所示:从“反应”类中导入{Component} Embed扩展了Components {componentDidMount()...
从rollup.config.js
中删除: