码迷,mamicode.com
首页 > Web开发 > 详细

在webpack开发中引入第三方插件(vue项目)完善ing...

时间:2017-09-11 18:05:41      阅读:507      评论:0      收藏:0      [点我收藏+]

标签:document   query   loader   样式   mon   不能   time   pac   间隔   

并不是所有的js文件都可以直接在webpack中使用。这些文件可能不支持模块(module)格式,甚至完全没有使

用模块(module)。

webpack提供了几种loaders(装载机)来解决这些文件如何在webpack中使用。 这个示例使用require来保证他们(

的代码量)短小。通常你需要在你的webpack的config文件中配置这些loaders(装载机)。详情见Using loaders

(使用加载器)。

1.IMPORTING(进口)

如果一个文件不通过require()依赖进口,您将需要使用一个loader(装载机)。

imports-loader(

导入加载器)

允许您使用依赖于特定全局变量的module(模块), 这对于依赖于全局变量的第三方模块非常有用,比如$或者这是

window object(窗口对象)。imports-loader(进口装载机)可以添加必要的require(‘whatever”)calls(调用)

,因此模块在webpack上工作。

例子:

预计中的一个全局变量$和你有一个应使用jQuery的模块。

require("imports-loader?$=jquery!./file.js")

预计配置一个全局变量xconfig和你希望是{value: 123 }形式。

require("imports-loader?xConfig=>{value:123}!./file.js")

认为这是全局范围。

require("imports-loader?this=>window!./file.js") or require("imports-loader?

this=>global!./file.js")

插件provideplugin

这个插件使模块(module)在每个模块(module)中作为变量可用。这个模块 只是你需要使用的变量。

示例:

在每个模块中提供$和jQuery,无需编写 require(“jquery”)。

new webpack.ProvidePlugin({    $: "jquery",    jQuery: "jquery",    "window.jQuery": "jquery"

})

2.EXPORTING(出口) 该文件不导出其值。

exports-loader(出口装载机)

该loader(装载机)从文件里面导出变量。

示例:

该文件设置了一个全局范围变量var XModule = ...

var XModule = require(“exports-loader?XModule!./file.js")

该文件设置了多个全局范围变量:var XParser,Minimizer.

var XModule = require(“exports-loader?Parser=XParser&Minimizer!./file.js”)

XModule.Parser;XModule.Minimizer;(注释Parser:解析器)

文件设置一个全局变量XModule =...

require("imports-loader?XModule=>undefined!exports-loader?XModule!./file.js") (import to not leak

to the global context:导入不泄漏到全局上下文)

文件设置窗口属性window.XModule =... require("imports-loader?window=>{}!exports-loader?window.XModule!./file.js")

3.FIXING BROKEN MODULE STYLES(修复损坏的模块样式)

有些文件使用模块样式错误。你可能想解决这个通过webpack不使用这 风格的教学。

Disable some module styles(禁用某些模块样式 ):

示例:

破碎的AMD

require("imports-loader?define=>false!./file.js")

破碎的CommonJS

require("imports-loader?require=>false!./file.js")

配置选项module.noParse

这不由webpack解析。因此不能使用依赖项。这可能对 好的图书馆。

例子:

{     module: {         noParse: [             /XModule[\\\/]file\.js$/,             path.join(__dirname, "web_modules", "XModule2")         ]     } } 注意:exports和module仍然可用并且能用。你可能想使用imports-loader未定义这些exports和module

script-loader(脚本装载机)

这个加载器在全局上下文中计算代码,就像在脚本标签中添加代码一样。在这种模式下,每一个正常的库都应该

可以工作。require、module等未定义。

注:该文件内容作为字符串添加到bundle(批)。在webpack中它不是(体积)最小的,因此要使用(体积) 最

小的版本。也没有开发工具支持通过这个loader来添加库。

EXPOSING(曝光)

有些情况下,您希望模块将自己导出到全局上下文中。

不要这样做,除非你真的需要这个。(最好用provideplugin)

expose-loader(曝光加载器) 这个加载器(loader)暴露了出口模块全局环境。

例子:

揭露XModule的全球语境中 require("expose-loader?XModule!./file.js") 另一个例子:

require(‘expose-loader?$!expose?jQuery!jquery‘);

 ...

$(document).ready(function() { console.log("hey"); })

通过将jQuery作为包含jQuery代码或根文件的文件中的全局名称空间提供,您可以在项目中处处使用jQuery。这

是很好的如果你计划在你的webpack项目中执行Bootstrap(启动项目)。

注意:使用太多的全局名称间隔会使应用程序效率降低。如果您打算使用许多全局名称空间,那么考虑在您的项

目中实现类似Babel runtime(运行时)之类的东西。

ORDER OF LOADERS(加载器顺序) 以装载机 在极少数情况下,当您需要应用多个技术时,需要使用正确的加载顺序: 内联:expose-loader!

imports-loader!export-loaders,配置优先级:expose > imports > exports。

 

在webpack开发中引入第三方插件(vue项目)完善ing...

标签:document   query   loader   样式   mon   不能   time   pac   间隔   

原文地址:http://www.cnblogs.com/auto123-num/p/7505668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!