Question

我已使用npm i plotly.js
将import 'plotly.js/dist/plotly'行添加到我的密谋导入文件中
然后在webpack中按照here的说明将文件捆绑到客户端。
添加了自定义js文件以进行绘图测试
然后在plotly脚本中将其添加到我的html页面中，首先是该软件包，然后是我的自定义js。

但是我收到错误消息ReferenceError: Plotly is not defined。

要测试，我使用了this example中的javascript代码。将文件保存在本地站点here上但不使用Webpack本地保存时，我可以使它工作。

我有什么想念的或者做错了吗？我的其他软件包似乎运行良好，可以看到plotly.js已成功添加到relvent文件夹客户端。

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    uibundles: path.resolve(__dirname, 'frontend.js'),
    plotly: path.resolve(__dirname, 'plotlyimport.js'),
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public/js')
  },
  plugins: [new MiniCssExtractPlugin({
    filename: '../css/[name].css',
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.js$/,
        loader: 'ify-loader'
      },
    ]
  }
};

Answer 1

您可能需要使用webpack resolve（here）添加详细信息

您能尝试一下吗？

resolve: {
     modules: ['node_modules'],
     extensions: ['.js']
},

Answer 2

似乎您需要使用 webpack外部对象来解决此问题。

webpack externals：防止捆绑某些导入的软件包，而是在运行时检索这些外部依赖项。

例如，要包含CDN中的地块而不是将其捆绑在一起：

index.html

<script src="../plotly.js"></script>

webpack.config.js

module.exports = {
  //...
  externals: {
    plotly: 'plotly'
  }
};

这将使所有相关模块保持不变，即，下面显示的代码仍将起作用：

var Plotly = require('plotly.js');

..
..
Plotly.newPlot('myDiv', data, layout, config );

有关更多详细信息，请参见webpack externals。

与webpack密谋

2 个答案: