详解webpack引入第三方库的方式以及注意事项(2)

结果是构建结束后,文件比较大。那么考虑使用cdn,如上文描述的那样。这样需要删除import或require的引用,同时删除安装的jquery依赖,但是由于项目结构比较乱,模块比较多,为了避免造成少改或者漏改的问题,会造成应用出错。该怎么办呢?

有的人说,不删除jquery依赖,那么使用cdn的目的就没有意义了。而使用external则可以解决这个问题。

可以在module.js文件中添加如下代码:

... var $ = require('jquery') ...

然后,保存文件,发现构建输出提示如下的错误:

ERROR in ./module.js Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1' @ ./module.js 3:0-23 @ ./main.js @ multi (webpack)-dev-server/client?:8080 ./main.js

模块module.js中的jquery不能被解析。

紧接着,在webpack.config.js中添加如下代码:

externals: { jquery: 'jQuery', jquery: '$' },

其中jquery代表的是require('jquery')中的jquery,而jQuery和$代表的是jquery这个库自身提供的可是实例化的标识符。其它的库的cdn化,修改类似jquery。

但是,如果在项目一开始就决定用cdn的话,就不要在使用jquery的模块中,使用var $ = require('jquery') 或 import $ from 'jquery';,虽然这样做不会报错,但是如果出于某方面的考虑,后期可能会引入jquery依赖,那么就必须使用var $ = require('jquery') 或 import $ from 'jquery'; 。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/160bbee71fb7ac8876bd488b363e2a04.html