webpack umd lib 和外部文件

IT技术 reactjs webpack
2021-04-04 02:40:38

我想将我的 react 组件打包为umdlib。

下面是 webpack 我的设置:

module.exports = {
  devtool: 'eval',
  entry: [
    './lib/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'lib.js',
    library: 'lib',
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/
      }
    ]
  },
  externals: {
    "react": "React"
  }
}

然后在我以这种方式要求我的其他组件中的包之后

example.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {lib} from "../dist/lib";

上面组件的 webpack 设置是:

module.exports = {
  devtool: 'eval',
  entry: [
    './examples/example'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/
      }
    ]
  }
}

在我编译example.js文件后,它显示错误:

Line 3: Did you mean "react"?
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 |   if(typeof exports === 'object' && typeof module === 'object')
> 3 |       module.exports = factory(require("React"));
    |                                    ^
  4 |   else if(typeof define === 'function' && define.amd)
  5 |       define(["React"], factory);
  6 |   else if(typeof exports === 'object')

我认为错误来自外部设置,因为在我删除后externals: {react: "React"},它可以工作。

我搜索了一些相关的答案,但无法解决。

有没有人对此有任何想法?谢谢。

1个回答

我找到了答案!

原因是umd需要设置不同的外部值(参考文档)。

因为我将外部 react 设置为{react: React},webpack 会尝试找到一个名为React.

所以你需要在不同的module定义中设置不同的值。

externals: {
  "react": {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  }
}

然后就修好了!

多谢!谢谢你,兄弟!我正在搜索 3 天,因为 webpack 文档只是胡说八道,我没有看到任何帮助!
2021-05-25 02:40:38
你使用的是哪个版本的 webpack?它仍然适用于 webpack 2 吗?
2021-06-09 02:40:38
@BigDong 我还没有尝试过 webpack 2。它不适用于 webpack 2 吗?
2021-06-13 02:40:38
感谢您发布此信息!今天让我省了很多头痛
2021-06-19 02:40:38
感谢您发布此信息。我用 webpack 4 试过这个,它有效
2021-06-20 02:40:38