我的老板同事坚持要买一个漂亮的HTML/CSS/JS external template作为网站的基础设计。这个网站是我们使用Laravel、SASS和ES6到Webpack开发的一个大项目。
我们购买的模板提供了在SASS和ES5JS中开发的一整套功能。我使用所提供的SASS并对其进行编辑没有任何问题，因为我也使用它，但我非常拘泥于Javascript部分。
在第一部分中，我使用下载模板中的文件：
- core.min.js
- script.js
script.js包含大约1k个未缩小的行，这些行如下：
plugins = {
bootstrapTooltip: $("[data-toggle='tooltip']"),
bootstrapModalDialog: $('.modal'),
captcha: $('.recaptcha'),
rdNavbar: $(".rd-navbar"),
wow: $(".wow"),
owl: $(".owl-carousel"),
swiper: $(".swiper-slider"),
counter: $(".counter"),
twitterfeed: $(".twitter"),
isotope: $(".isotope"),
viewAnimate: $('.view-animate'),
selectFilter: $(".select2"),
rdInputLabel: $(".form-label"),
bootstrapDateTimePicker: $("[data-time-picker]"),
customWaypoints: $('[data-custom-scroll-to]'),
stepper: $("input[type='number']"),
radio: $("input[type='radio']"),
checkbox: $("input[type='checkbox']"),
customToggle: $("[data-custom-toggle]"),
regula: $("[data-constraints]"),
search: $(".rd-search"),
searchResults: $('.rd-search-results'),
copyrightYear: $(".copyright-year"),
materialParallax: $(".parallax-container"),
dateCountdown: $('.DateCountdown'),
flickrfeed: $(".flickr"),
responsiveTabs: $(".responsive-tabs")
};
// [...]
if (plugins.copyrightYear.length) {
plugins.copyrightYear.text(initialDate.getFullYear());
}
// [...]
core.min.js包含大量js依赖项，如下所示：
/**
* @module jQuery Migrate
* @author jQuery Foundation and other contributors
* @see https://code.jquery.com/jquery/
* @license MIT
* @version 3.0.0
*/
"undefined"==typeof jQuery.migrateMute&&(jQu[...]
/**
* @module jQuery Cookie Plugin
* @see https://github.com/carhartl/jquery-cookie
* @license MIT
*/
!function(e){"function"==typeof define&&de
等等，也许还有30个图书馆！
在第二部分中，我使用了我自己的文件，主要是ES6 modules。
问题是，该模板使用的一些库也在我的ES6 modules中使用，因此它以多次导入相同的libs结束(一次在core.min.js中，一次在ES6 webpack捆绑包中(。例如，jQuery用于script.js(至window(和ES6模块(至imports(。有时我对同一个库有不同的版本！
因此，我开始创建一个vendor.js文件，并导入所有公共库，并将它们设置在window:上
import $ from 'jquery';
import moment from 'moment';
import 'bootstrap';
window.$ = window.jQuery = $;
window.moment = moment;
但是，我认为这是一种非常糟糕的做法，而且这还不够，还会导致一些库出现错误。例如，在全局范围的jQuery对象上初始化DataTables很难。此外，我不能对所有库都这样做，其中一些库在npm/yarn中不存在。。
我不知道如何处理这些东西，有没有一种方法可以在保持ES6结构正常工作的同时正确处理所有遗留的东西？或者我应该完全停止使用下载的模板吗？
选项1:
让webpack帮你做这些导入怎么样？你只需要使用全局变量，而不需要在任何地方导入它们。
由ProviderPlugin 实现
例如：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
moment: 'moment',
moduleNotInNpm: '/path/to/module/location.js/'
});
]
通过这种方式，webpack将以不同的方式处理这些模块的绑定。
选项2:
将所有这些模块放在一个(或两个、三个，不多(根文件夹中，例如放在自定义模块下：
节点模块/
客户模块/
src/
并利用cacheGroups来创建专门针对它们的块。任何想要使用它们的人都需要下载这个区块。这对性能有好处，因为这个块字节在不同的构建中不会有什么不同，所以可能几乎所有方式都会从用户缓存中提供。
optimization: {
splitChunks: {
cacheGroups: {
thirdpartylibraries: {
test: /custom_modules|node_modules/,
name: 'custom_modules',
},
}
}
}