corejs核心（core js）

本文目錄一覽：

• 1、網頁上有錯誤無效的被呼叫方core.js
• 2、webpack打包的CSS含有兩個相同的引入？
• 3、jquery.core.js 與 jquery-1.9.1.js 區別
• 4、如何單獨下載ui.core.js
• 5、什麼是前端開發的後台交互？

網頁上有錯誤無效的被呼叫方core.js

出現這種現象的原因通常是因為網頁本身有錯誤,我們可以在IE中設置讓其不檢查這類錯誤,進入“Internet選項”對話框後切換到“高級”選項卡,然後勾上“禁止腳本調試”。

還有可能中毒了。換個IE試試

webpack打包的CSS含有兩個相同的引入？

1. 摘要

Webpack是一種前端資源構建工具，一個靜態模塊打包器。在Webpack看來，前端的所有資源文件(js/json/css/img/less/…)都會作為模塊處理，當Webpack處理應用程序時，它將根據模塊的依賴關係進行靜態分析，打包生成對應的靜態資源。Webpack打包流程圖如圖1-1所示。

想了解Webpack，看這篇就夠了

圖1-1 Webpack打包流程圖

2. Webpack五個核心概念

2.1 Entry

入口(Entry)指示Webpack以哪個文件作為入口起點分析構建內部依賴圖並進行打包。

2.2 Output

輸出(Output)指示Webpack打包後的資源bundles輸出到哪裡去，以及如何命名。

2.3 Loader

Loader讓Webpack能夠去處理那些非JavaScript語言的文件，Webpack本身只能理解JavaScript。

2.4 Plugins

插件(Plugins)可以用於執行範圍更廣的任務，插件的範圍包括從打包和壓縮，一直到重新定義環境中的變量等。

2.5 Mode

模式(Mode)指示Webpack使用相應模式的配置。分為development和production兩種模式，下面分別進行簡述。

development: 開發模式，能讓代碼本地運行的環境，會將process.env.NODE_ENV的值設為development，同時啟用NamedChunksPlugin和NamedModulesPlugin插件；

production: 生產模式，能讓代碼優化運行的環境，會將process.env.NODE_ENV的值設為production，同時啟用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。

3. Wbepack配置

3.1 webpack.config.js文件

webpack.config.js是webpack的配置文件，用來指示webpack工作，運行webpack指令時，會加載裡面的配置，所有構建工具都是基於nodejs平台運行的，默認採用commonjs模塊化。webpack.config.js基礎配置如圖3-1所示。

想了解Webpack，看這篇就夠了

圖3-1 webpack.config.js基礎配置

3.2 devServer配置

開發服務器(devServer)用來實現自動化(自動編譯、自動打開瀏覽器、自動刷新瀏覽器)，只會在內存中編譯打包，不會有任何文件輸出，本地安裝webpack-dev-server後，通過npx webpack-dev-server命令啟動devServer，核心代碼如圖3-2所示。

想了解Webpack，看這篇就夠了

圖3-2 devServer配置核心代碼

3.3 打包html/樣式/圖片/其它資源

打包不同的資源會使用不同的loader和插件，打包html/樣式/圖片/其它資源的流程如下所述。

3.3.1 打包html資源

1.下載html-webpack-plugin插件；

2.引入html-webpack-plugin插件；

3.使用html-webpack-plugin插件，並進行相應配置。

3.3.2 打包樣式資源

不同的樣式文件需要配置不同的loader

1.下載loader；

2.配置loader，css樣式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是將css文件變成commonjs模塊加載到js文件中，style-loader的作用是創建style標籤，將js中的樣式資源插入進去，添加到head中生效。

3.3.3 打包圖片資源

1.下載url-loader，file-loader

2.配置loader

3.3.4 打包其它資源

1.下載file-loader

2. 配置loader，配置該loader作用於不為html/css/less/js的其他文件

3.4 提取css成單獨文件/css兼容性處理/壓縮css

3.4.1 提取css成單獨文件

樣式文件打包後會默認和js文件一起輸出，可以通過插件將打包後的css文件單獨輸出，流程如下所述。

1.下載mini-css-extract-plugin插件

2.引用該插件

3.配置

3.4.2 css兼容性處理

1.下載postcss-loader和postcss-preset-env

2.在package.json中browsetslist屬性中分別對開發環境和生產環境進行兼容性配置，設置支持樣式的瀏覽器版本

3.通過postcss找到package.json中browserslist裡面的配置，通過配置加載指定的css兼容性樣式。

3.4.3 壓縮css

1.下載optimize-css-assets-webpack-plugin插件

2.引用該插件

3.使用該插件

3.5 js語法檢查eslint/js兼容性處理/js壓縮

3.5.1 js語法檢查eslint

1.下載eslint-loader和eslint

2.在package.json中的eslintConfig中進行配置

3.配置eslint-loader，其中只需檢測js文件並要排除第三方庫，只檢測自己寫的源代碼，同時可在options配置中設置fix:true，自動修復eslint的錯誤。

3.5.2 js兼容性處理

1.下載babel-loader、@babel/core、@babel/preset-env，通過@babel/preset-env做基本的js兼容性處理，然後通過corejs做前面無法實現的兼容性處理，並實現按需加載

2. 配置loader

js兼容性處理核心代碼如圖3-3所示

想了解Webpack，看這篇就夠了

圖3-3 js兼容性處理核心代碼

3.5.3 js壓縮

mode設置為production生產環境時會自動壓縮js代碼。

4. webpack性能優化

可以從開發環境和生產環境分別對webpack進行性能優化。其中開發環境主要考慮從打包構建速度和代碼調試兩個方面進行優化，生產環境主要考慮從打包構建速度和代碼運行性能這兩個方面進行優化。下面簡單介紹下開發環境上通過HMR提升構建速度。

4.1 HMR

HMR(熱模塊替換)，作用是一個模塊發生變化後，只會更新打包這一個模塊而不是所有模塊，通過在devServer中設置hot:true屬性啟動HMR功能。

其中對於樣式文件，可以使用HMR功能，因為style-loader內部實現了；

對於js文件，默認不能使用HMR功能，解決方法：修改入口文件js代碼，添加支持HMR功能的代碼，另外HMR只能處理非入口js文件的其他文件，對入口文件並不能生效，因為一旦入口文件更新，入口文件引入的其他文件一定會被重新加載；

對於html文件，默認不能使用HMR功能，同時會導致html文件不能熱更新，解決方法：修改entry入口文件，將html文件引入，只能解決html文件不能熱更新的問題。

jquery.core.js 與 jquery-1.9.1.js 區別

jquery-1.9.0.js是可以調試的版本，包含注釋，沒有經過壓縮，相對較大，在開發環境中使用；

jquery-1.9.0.min.js經過壓縮處理，尺寸小，下載的尺寸小，加載的時間短，在運行環境中使用。

如何單獨下載ui.core.js

在jQuery ui的官網頁面 有勾選項的。只勾選core那項就可以了。把其他的勾選去掉然後下載

什麼是前端開發的後台交互？

主要就是js對數據的操作和對dom的操作。

前端的工作就是切圖，展示數據到網頁中。那麼怎麼獲取數據呢？以什麼格式獲取數據呢？都是需要和後台交互的。

後台語言都是不一樣的：php，jsp等等，我們前端js的工作就是把他們的數據拿過來顯示。

給你舉個梨子吧，我們公司後台拋數據一般就smarty（php）的框架或者是ajax來傳。

如果是smarty的話，前端直接負責把smarty填寫到html網頁中。

如果是ajax的話，前端負責用js操作數據並展示，下面是一個我們前後端規定的數據格式：

{“flag”:”001″,”content”:{}}

上面是應該json數據，有項目的時候，我們前後端會大概說一下接口地址，前端請求的參數，後端返回的參數，然後大家就開始寫，寫的差不多的時候，大家調一下數據，沒問題就可以了。

現在主流的前後端交互是用ajax吧，主流的框架用jquery，給你一個jquery請求ajax的例子：

$.ajax({

        url: ‘/path/to/file’,//請求地址

        type: ‘GET’,

        dataType: ‘json’,

        data: {param1: ‘value1’},//參數

        success: function (obj){ //返回的內容

            //遍歷obj//前端在這裡操作返回的數據，並展示

        }

    })

前後端交互沒那麼難，前端最關鍵核心的東西是core js。

dom操作都是可以找api，然後對着文檔來做，想提高前端就提高自己的core js。這樣的話才能提高核心競爭力。

以後我們多多交流，有幫助就採納！！！