项目中webpack处理require()引入echarts的问题

最新推荐文章于 2024-03-05 08:53:39 发布

请叫我爱你一万年

最新推荐文章于 2024-03-05 08:53:39 发布

阅读量5.5k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_32339477/article/details/89467907

版权

在项目中，使用npm安装的echarts通过require()引入时，浏览器会报'Uncaught ReferenceError: require is not defined'。为解决此问题，需要借助webpack将require()转换为浏览器可识别的语法。通过创建webpack配置文件，安装所需依赖，设置脚本，并配置html-webpack-plugin，最终通过npm run build进行打包，成功解决引用问题。

摘要由CSDN通过智能技术生成

在这里插入图片描述
我们按照echarts的官网用npm安装echarts并用require(“echarts”)引入echarts对象，但是如果直接运行js脚本会报“Uncaught ReferenceError: require is not defined”的错误，因为require()是nodejs的语法，应用于服务端，所以浏览器不能识别require()方法。
所以我们就需要借助webpack、glup、grunt等打包工具把require()转化为浏览器能识别的语法。这里我使用简单的webpack对项目中的echarts进行打包

新建一个目录，在目录中新建两文件夹dist、src和一个webpack.config.js的js文件，再在根目录npm init新建一个项目(前提是你的电脑安装了nodejs和npm),如图示：

== 注：webpack.config.js不能随便命名，因为它是webpack打包时的默认入口==

2.在src->js目录下新建一个main.js的js文件，引入官方demo：

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
console.log(myChart);
myChart.setOption({
   
   title: {
   
       text: 'ECharts 入门示例'
   },
   tooltip