我想将我的 react 组件打包为umd
lib。
下面是 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"}
,它可以工作。
我搜索了一些相关的答案,但无法解决。
有没有人对此有任何想法?谢谢。