Question

我的webpack.config.prod.js文件具有以下外部依赖项：

const webpack = require('webpack');
const path = require('path');

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'app.js',
        libraryTarget: 'amd',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    externals: {
        react: 'react',
        'react-dom': 'react-dom'
    },
};
module.exports = config;

并且我的html文件中包含以下脚本：

<!DOCTYPE html>
<html>
    <head>
        <title>React App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" crossorigin=""></script>
        <script>
          (function(cdn) {
            require(cdn);
            ['react', 'react-dom'].forEach(dep => (dep) => {
              define(dep, cdn, function(b) {
                return b[dep];
              });
            });
          })(['http://localhost:8080/public/bundle.js'])
        </script>
    </head>
    <body>
        <div id="app"></div>
        <script src="app.js"></script>
    </body>
</html>

如您所见，我正在尝试从CDN加载我的react和react-dom依赖关系，但是app.js在依赖关系之前加载，所以我得到了：

未捕获的错误：匿名define（）模块不匹配： function（e，t）{return function（e）{var t = {}; function n（r）{if（t [r]）return t [r] .exports; var o = t [r] = {i：r，l：！1，exports：{}};返回 e [r] .call（o.exports，o，o.exports，n），o.l =！0，o.exports}返回 nm = e，nc = t，nd = function（e，t，r）{no（e，t）|| Object.defineProperty（e，t，{enumerable：！0，get：r}）}}，nr =函数（e）{“未定义”！= typeof Symbol && Symbol.toStringTag && Object.defineProperty（e，Symbol.toStringTag，{value：“ Module”}），Object.defineProperty（e，“ esModule”，{value：！0}）}，nt = function（e，t ）{if（1＆t &&（e = n（e）），8＆t）返回e; if（4＆t &&“ object” == e && e && e .__ esModule的类型）return e; var r = Object.create（null）; if（n.r（r），Object.defineProperty（r，“ default”，{enumerable：！0，value：e}），2＆t &&“ string”！= typeof e）for（e中的var o）n.d（r，o，function（t）{return e [t]}。bind（null，o））;返回 r}，n.n = function（e）{var t = e && e .__ esModule？function（）{返回 e.default}：function（）{return e}; return n.d（t，“ a”，t），t}，n.o = function（e，t）{返回 Object.prototype.hasOwnProperty.call（e，t）}，np =“”，n（ns = 2）}（[function（t，n）{t.exports = e}，function（e，n）{e .exports = t}，function（e，t，n）{“使用严格”; n.r（t）; var r = n（0），o = n.n（r），u = n（1），i = n.n（u）;函数 c（e）{return（c =“ function” == typeof Symbol &&“ symbol” == typeof Symbol.iterator？function（e）{e返回类型}：function（e）{return e &&“ function” == typeof Symbol && e.constructor === Symbol && e！== Symbol.prototype？“ symbol”：typeof e}）（e）}函数f（e，t）{for（var n = 0; n || Object.getPrototypeOf（e）}）（e）}函数 p（e，t）{return（p = Object.setPrototypeOf || function（e，t）{return e.proto = t，e}）（e，t）} var y = function（e）{function t（）{return 函数（e，t）{if（！（e instanceof t））抛出新的TypeError（“无法调用类作为函数“）}（this，t），a（this，l（t）.apply（this，arguments））} var n，r，u; return function（e，t）{if（“ function”！= t && null！== t）的类型 TypeError（“超级表达式必须为null或函数“）; e.prototype = Object.create（t && t.prototype，{构造函数：{value：e，可写：！0，可配置：！0}}），t && p（e，t）}（t，oaComponent），n = t，（r = [{key：“ render”，value：function（）{返回 o.a.createElement（“ div”，null，“你好 “，this.props.name）}}））&& f（n.prototype，r），u && f（n，u），t}（）; iarender（oacreateElement（y，{name：” Jean“}））， document.getElementById（“ app”））}]）} http://requirejs.org/docs/errors.html#mismatch 在makeError（require.min.js：1）在入口时定义（require.min.js：1）在require.min.js：1

如何在依赖后加载app.js？

应用在依赖项requirejs未被捕获之前加载：错误的匿名define（）

0 个答案: