項目需要兼容ie8，采用純js+jquery，並且使用es5的語法
項目結構：一個構造函數（class）放一個文件，入口文件放inde.js
注意：ie8，jquery只能使用1.X的版本，最終使用1.12.4; 不用promise 等，全部用回調
為提高性能 使用webpack，將多個js文件打包成一個
文件引用導出 使用es6的import export 因為webpack可以處理import export
import {Util} from './util.js';
export function Util() { }
import Util from './util.js';
export default function Util() { }
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
'index': ['./src/index.js','./src/util.js'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
minify: false,
}),
new MiniCssExtractPlugin({
filename: "[name]_[contenthash:8].css"
}),
new webpack.ProvidePlugin({
$: 'jquery',
}) ], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, optimization: { minimizer: [ `...`, new CssMinimizerPlugin(), ], }, output: { filename: '[name]_[contenthash:8].js', path: path.resolve(__dirname, 'dist'), clean: true, }, target: ['web','es5'], // 解決打包后還有箭頭函數的問題 };
webpack中文件打包 hash、chunkhash、contenthash 的區別
引入jquery的方法
1直接引入
import $ from './jquery-1.12.4.min.js' window.$ = $ window.jQuery = $
2
import $ from 'jquery'
package.json
"dependencies": { "jquery": "1.12.4" },
3 使用 webpack.ProvidePlugin
package.json
"dependencies": {
"jquery": "1.12.4" },
const webpack = require('webpack'); // 不能用{webpack} 會報錯
new webpack.ProvidePlugin({
$: 'jquery',
})
坑：ie8 Object.defineProperty
解決： 在HTML頁面添加以下代碼
<script> // ie8兼容 var origDefineProperty = Object.defineProperty; var arePropertyDescriptorsSupported = function () { var obj = {}; try { origDefineProperty(obj, "x", {enumerable: false, value: obj}); for (var _ in obj) { return false; } return obj.x === obj; } catch (e) { /* this is IE 8. */ return false; } }; var supportsDescriptors = origDefineProperty && arePropertyDescriptorsSupported(); if (!supportsDescriptors) { Object.defineProperty = function (a, b, c) { //IE8支持修改元素節點的屬性 if (origDefineProperty && a.nodeType == 1) { return origDefineProperty(a, b, c); } else { a[b] = c.value || (c.get && c.get()); } }; } </script>
加上jquery.js文件一起打包，，ie8還是不行，sad！！！不打包還行ie8還可以打開，打包后就不行了，啊啊啊
最后方案： jquery.js，單獨加載，其他打包成一個js文件
ps:或許可以把項目中的jq代碼去掉，參考這個https://youmightnotneedjquery.com/
jquery需要先加載，再加載index.js
new HtmlWebpackPlugin({
template: './index.html',
minify: false,
inject: false, // 不插入， 使用自定義模板
}),
<link href="<%=htmlWebpackPlugin.files.css[0] %>" rel="stylesheet">
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.js[0]%>">
參考 html-webpack-plugin詳解
index.html如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>自定義模板</title> <link href="<%=htmlWebpackPlugin.files.css[0] %>" rel="stylesheet"> <script> window.onerror = function (message, url, line) { alert("Message : " + message + "\nURL : " + url + "\nLine Number : " + line); // Return true to supress the browser error messages (like in older versions of Internet Explorer) return true; } </head> <body> </body> <script> // ie8兼容 var origDefineProperty = Object.defineProperty; var arePropertyDescriptorsSupported = function () { var obj = {}; try { origDefineProperty(obj, "x", {enumerable: false, value: obj}); for (var _ in obj) { return false; } return obj.x === obj; } catch (e) { /* this is IE 8. */ return false; } }; var supportsDescriptors = origDefineProperty && arePropertyDescriptorsSupported(); if (!supportsDescriptors) { Object.defineProperty = function (a, b, c) { //IE8支持修改元素節點的屬性 if (origDefineProperty && a.nodeType == 1) { return origDefineProperty(a, b, c); } else { a[b] = c.value || (c.get && c.get()); } }; } </script> <script> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; if (callback) { callback(); } } } } else { script.onload = function () { if (callback) { callback(); } } } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } loadScript('/assets/plugins/jquery/jquery-1.12.4.min.js', function () { loadScript("<%=htmlWebpackPlugin.files.js[0] %>"); }); </script> </html>