cesiumjs 使用 webpack 时出现 Requirejs 错误

Question

我尝试运行我的项目使用热构建（使用普通构建做同样的事情）但它给了我这个错误：

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from C:\projects\Web Network Analysis\public\src
Hash: 94a02afbd667b1bea74c
Version: webpack 2.2.1
Time: 3694ms
        Asset     Size  Chunks                    Chunk Names
client.min.js  3.17 MB       0  [emitted]  [big]  main
chunk    {0} client.min.js (main) 1.15 MB [entry] [rendered]
   [10] ./~/react/react.js 56 bytes {0} [built]
  [122] ./~/react-router/es/index.js 1.46 kB {0} [built]
  [144] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [145] ./js/client.js 940 bytes {0} [built]
  [146] (webpack)-dev-server/client?http://localhost:8080 5.28 kB {0} [built]
  [147] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
  [150] ./js/pages/Layout.js 2.36 kB {0} [built]
  [151] ./js/pages/MapPage.js 2.68 kB {0} [built]
  [181] ./~/react-dom/index.js 59 bytes {0} [built]
  [317] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [319] ./~/url/url.js 23.3 kB {0} [built]
  [321] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
  [322] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [324] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
  [325] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ../js/client.js 52 bytes {0} [built]
     + 311 hidden modules

WARNING in ./~/cesium/index.js
11:35-42 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./~/requirejs/bin/r.js
Module parse failed: C:\projects\Web Network Analysis\public\node_modules\requirejs\bin\r.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
|  * @license r.js 2.3.3 Copyright jQuery Foundation and other contributors.
 @ ./~/cesium/index.js 5:16-36
 @ ./js/pages/MapPage.js
 @ ./js/client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ../js/client.js
webpack: Failed to compile.

这是我的 webpack.config.js 的样子（它确实提到了 Cesium 修复 here）：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "../js/client.js",
  module: {
    unknownContextCritical: false,
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js",
    sourcePrefix : ''
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

我已经尝试更新每个模块，但一点用都没有。搜索错误只会给我关于 webpack@2 没有这个问题的消息，但正如你所看到的，我正在使用 webpack@2.2.1。

有谁知道如何解决这个错误？

Answer 1

这是为我做的：

require('../../node_modules/cesium/Build/CesiumUnminified/Cesium.js');
const Cesium = window.Cesium;

cesium npm 包没有定义 an entry point – 我认为这是问题所在。

Answer 2

遇到同样的问题，我偶然发现了 Cesium and Webpack 教程。该教程中涉及的内容比我在这里 TL;DR 涉及的要多得多，但是有一些选择：

使用预编译版的Cesium
使用来源
我已经设置好了webpack，告诉我如何使用Cesium

这是一个非常详尽的教程。

Answer 3

我在我的 ES6+ 代码中使用 Webpack along with html-webpack-plugin and html-webpack-template in order to import Cesium 库。

安装html-webpack-plugin和html-webpack-template:

npm install html-webpack-plugin html-webpack-template

或

yarn add html-webpack-plugin html-webpack-template

考虑到 dist 是我们的输出目录，使用 externals option to exclude Cesium from the build and scripts option of html-webpack-template 将 Cesium 脚本附加到 HTML:

webpack.config.babel.js

import HtmlPlugin from 'html-webpack-plugin';
import htmlTemplate from 'html-webpack-template';

export default ((env, argv) => {
  const { mode = 'development' } = argv;
  return {
    context: path.resolve(__dirname, 'src'),
    entry: {
      index: ['@babel/polyfill', './index.js']
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/[name].' + (mode === 'development' ? '' : '[chunkhash:6].') + 'js'
    },
    externals: {
      cesium: 'Cesium'
    },
    plugins: [
      new HtmlPlugin({
        filename: path.resolve(__dirname, 'dist/index.html'),
        inject: false,
        template: htmlTemplate,
        title: 'GeoPort',
        appMountId: 'container',
        scripts: ['cesium/Cesium.js']
      })
    ],
    // other Webpack options go here...
  };
})

您必须将 Cesium 文件放在 dist/cesium 目录中。我通常基于 copyfiles:

为此目的使用 NPM 脚本

package.json

{
  ...
  scripts: {
    "build": "npm run copy:cesium && webpack --mode=production",
    "copy:cesium": "copyfiles -s -u 4 \"node_modules/cesium/Build/Cesium/**/*\" dist/cesium",
  }
}

现在您可以在源代码中导入 Cesium：

import Cesium from 'cesium';

const cesiumWidget = new Cesium.CesiumWidget('globe');

cesiumjs 使用 webpack 时出现 Requirejs 错误

Requirejs error in cesiumjs using webpack

requirejs

cesium

webpack