我想react.min.js在生产中使用CDN(例如https://unpkg.com/react@15.3.1/dist/react.min.js)
让Webpack将我的import React from 'react'语句转换为const React = window.React而不是构建node_modules/react到bundle中的最佳方法是什么？
我一直这样做resolve.alias:
在index.html:
<head>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
<script type="text/javascript" src="/assets/bundle.js"></script>
</head>
在webpack.prod.config.js:
alias: {
react$: './getWindowReact',
},
getWindowReact.js:
module.exports = window.React;
注意:在旧的问题中,我没有意识到将React构建到Webpack包中NODE_ENV=production会剥离propTypes检查.其中一个答案侧重于此.
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。
如果我只是移动 '@angular/compiler' 它也可以工作，但是当外部化 '@angular/core' 和其他人时，我Can't resolve all parameters for ApplicationModule: (?) at at syntaxError (util.ts:100) at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.ts:957) ...在引导应用程序时收到错误。
我使用的文件是您可以在 unpkg.com 中找到的 8.2.14 UMD 包，我的外部文件是：
[
/^@example\,
/^rxjs$/,
/^rxjs\/operators$/,
/^@angular\/core$/,
/^@angular\/compiler$/,
/^@angular\/common$/,
/^@angular\/common\/http$/,
/^@angular\/forms$/,
/^@angular\/platform-browser$/,
/^@angular\/platform-browser-dynamic$/,
/^@angular\/router$/,
/^zone\.js$/,
/^single-spa$/
]
rxjs 包是在https://cdn.jsdelivr.net/npm/@esm-bundle 中找到的包。
您可以在此 repo 上看到错误：https : //github.com/OriolInvernonLlaneza/test-share-angular
提前致谢！
编辑：多亏了 yurzui 的回答，这个错误得到了解决。但是，我现在收到另一个错误：
Class constructor I cannot be invoked without 'new'
at new EventEmitter (event_emitter.ts:78)
at new NgZone (ng_zone.ts:97) …webpack webpack-externals angular micro-frontend single-spa-angular
我在webpack.config中为material-ui定义了外部
module.exports = [{
entry: ...
output:...
externals: {
react: {
commonjs: "react",
commonjs2: "react"
},
"material-ui": {
commonjs: "material-ui",
commonjs2: "material-ui"
}
},
module: ...
}];
仍然它给错误像-
无法解析模块'material-ui / IconButton'......
在我的入门js文件中，我有
import React, {Component} from "react";
import IconButton from "material-ui/IconButton";
.....
.....
尝试使用 webpack4 使用 Vue 和 ElementUI 设置项目。我想从 CDN 中提取 Vue 和 ElementUI，所以我有以下 webpack 配置
module.exports = {
mode: "development",
entry: ["./app.js"],
externals: {
vue: "Vue",
"element-ui": "ElementUI"
},
module: {
rules: [
{
test: /.vue$/,
use: "vue-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.ttf$|.woff$/,
use: [{ loader: "url-loader", options: { limit: 10000 } }]
}
]
}
};
我的 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link …