调用webpack打包后的js中的函数报错问题

JavaScript021

调用webpack打包后的js中的函数报错问题,第1张

今天用原生js和jquery动态生成一个表单弹窗，因为想在使用的时候只引入一个js文件，所以想到用webpack将js和css打包到一起，这样就不用单独引入css文件了，结果使用过程中还是踩了一些坑。

文件里面js函数较多有生成dom的有校验的有提交表单获取值的，在这我只说一下出现问题的js函数，表单所有dom结构都是动态生成的，有两个点击事件是用原生js直接写到html标签上面的，一个方法是用来关闭表单一个方法是用来提交表单。

还有一个方法是给外部调用触发生成表单弹窗的方法

通过webpack打包后在页面中引入打包后的js文件，直接调用questionnaire方法打开控制台发现报未定义

webpack打包后的js文件中的方法和变量都变成了局部的，外部无法直接访问。解决办法：修改上面三个方法的定义方式

将上面三个方法都改为显式添加到全局，打包后引入js调用方法即可正常显示。

前面的两个方法因为是在html中直接调用的所以还有另一种处理方法：添加事件监听

打包引入后发现同样是可以的。

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在module.exports的最后加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了(测试这一步不用也可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.