记react 插件使用webpack5打包的一些坑点

可能遇见的问题:

  • react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  • 参考: https://stackoverflow.com/questions/61706057/webpack-typscript-library-import-is-undefined-in-react-project 我这里用到的是webpack5.所以没法使用4的一些插件因为不支持,我只配置了
    libraryTarget: 'umd',
    globalObject: 'this',
    这两个属性,在output中, 另外又发现启动后会爆出 Minified React error #321 这个错误,这里是因为插件本身的react引用要使用外部的,不是插件自身的react引用,在webpack 配置如下:
    externals: {
      react: {
        commonjs: 'react',
        commonjs2: 'react',
        amd: 'react',
        root: 'React',
      },
      'react-dom': {
        commonjs: 'react-dom',
        commonjs2: 'react-dom',
        amd: 'react-dom',
        root: 'ReactDOM',
      },
    },
    此外可以在 package.json 中为 react 和 react-dom 添加同伴依赖 peerDependencies 的映射,这是为了检测宿主环境中这两项依赖的版本如果低于你规定的最低版本,那么在 npm@3 中会给出警告(npm@1 和 npm@2 中会自动安装)。 参考: https://zhuanlan.zhihu.com/p/93773786

   此外,gitingore中忽略的文件可能导致npm  publish 比如dist文件夹等的时候也忽略掉,所以如果你的文件需要发布到npm 的时候请不要写到gitinonre中

npm:

https://www.npmjs.com/package/llc-calendar

git:

https://github.com/luochenLing/llc-calendar

posted @ 2021-12-15 13:07  洛晨随风  阅读(762)  评论(0编辑  收藏  举报