关于使用 webpack 将旧式 JavaScript 库导入到 ES6 / ES11 项目中的技巧
0/5 (0投票)
将 jQuery UI 库导入到 ES6 项目
引言
一些使用早期版本 JavaScript 编写的 JavaScript 库，例如 ES5，可能由于内部定义的全局函数而与 ES6 和 webpack 不兼容。
背景
此技巧涉及将 js 库导入到具有 webpack 的 ES6 / ES11 项目中。导入 ES5 或更旧的库时可能出现的问题是全局函数不可用。
Using the Code
例如，在 ES6 / ES11 项目中使用 webpack 引用 jQuery-UI 库时，全局函数将变得不可用。 要解决此问题，唯一正确的方法是定义一个单独的模块，并在其中复制全局函数，然后在其他地方导入该模块。 以下是一些需要在单独模块中重写的全局函数：Sine、Circ、Elastic、Back、Bounce 等。
为了引用 jQueryUI，有一个特定的软件包可用：webpack-jquery-ui，它允许简单地集成到具有 webpack 的应用程序中。
$ npm i --save 'jquery' 'webpack-jquery-ui' 'gsap'
然后在 JavaScript 文件中可以轻松地包含 jQuery 和 jQueryUI，如下所示
import './app.css'
import {TweenMax} from 'gsap'
import {Sine, Circ, Elastic, Back, Bounce} from './modules/jquery-ui-es6-migrations'
import $ from 'jquery';
import 'webpack-jquery-ui'
import 'webpack-jquery-ui/css'
window.$ = window.jQuery = $;
迁移后的 js 代码模块/modules/jquery-ui-es6-migrations.js看起来像这样
const Sine = (p) => {
return 1 - Math.cos( p * Math.PI / 2 )
}
const Circ = (p) => {
return 1 - Math.sqrt( 1 - p * p )
}
const Elastic = (p) => {
return p === 0 || p === 1 ? p : -Math.pow( 2, 8 * ( p - 1 ) ) *
Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 )
}
const Back = (p) => {
return p * p * ( 3 * p - 2 );
}
const Bounce = (p) => {
var pow2,
bounce = 4
while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 )
}
export {Sine, Circ, Elastic, Back, Bounce}
为了将 jQuery 与 webpack 一起使用 - 它需要在webpack.config.js文件中提供相应的插件
module.exports = {
...
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'windows.jQuery': 'jquery',
}),
....]
};
尽管如此，为了加载 jQueryUI 样式和图像，必须将特定的加载器添加到webpack.config.js模块规则中：file-loader、style-loader、css-loader。
$ npm i --save 'file-loader' 'style-loader' 'css-loader'
module: {
rules: [
{
test: /\.css$/,
loaders: ["style-loader","css-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'assets/images/'
}
},
....
]
},
就是这样。 具有从模块导入的已定义静态函数的 jQueryUI 可以安全使用。 以下是用于动画容器的迁移静态函数的示例用法
function expandContainer() {
const $container = $("#tabs")
const current_height = $("#tabs").outerHeight()
const props_from = {
opacity: .2,
height: 0,
top: -20
},
props_to = {
height: current_height,
opacity: 1,
top: 0
}
TweenMax.set($container, {css: props_from})
TweenMax.to($container, 0.25,
{css: props_to, ease: Sine.easeInOut, onUpdate: null, onComplete() {
$container.addClass('visible').height('')
$container.attr('style', '')
}});
}
function collapseContainer() {
const $container = $("#tabs")
TweenMax.to($container, 0.25, {css: {height: 0, opacity: .2},
ease: Sine.easeInOut, onUpdate: null, onComplete() {
$container.removeClass('visible')
}});
}
附加的源代码包含可用的版本，其中包含用于动画目的的导入函数。
关注点
什么是 Webpack？ 为什么 Web 开发人员需要它？ Webpack 将所有 JavaScript 源代码文件捆绑（类似于编译过程）到一个捆绑包（js 文件）中。 它还会监视 JavaScript 文件更改，并在代码更改时自动重新构建或捆绑项目。 它还会自动重新加载/刷新网页。 这是一个非常方便的工具，它在编码过程中完成所有例行的控制台作业。 例如，修改任何 js 文件，保存它 - 并且它会立即、即时地反映在网页上。 JavaScript 代码被转换、组合成一个文件，浏览器页面由 webpack 在后台刷新。
Babel 用于什么？ Babel 通过将现代、最新的 JavaScript ES6 或 ES11 (2020) 转换为广泛支持的 ES5（所有现代浏览器都支持）来启用许多浏览器尚未支持的最新 JavaScript 功能。 因此，开发人员可以在编码时使用最新的 JavaScript ES11 功能，然后 Babel 将其转换为 ES5 - 以便在所有现代浏览器中执行（因为 ES11 本身是一个标准，并且尚未被现代浏览器支持）。
Babel 通过 babel-loader 插件集成到 webpack 中。
npm install --save 'babel-loader'
在webpack.config.js中
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
......
]
}
}
此处描述的示例发布在 codesendbox 上，但它需要修复。
有用资源
历史
- 2020 年 7 月 13 日：初始版本
- 2020 年 7 月 14 日：添加了用于动画目的的导入函数的示例用法