雖然如今react,vue等框架開啓了前端開發的新篇章, 但對於一些比較複雜的頁面,好比想在項目裏面生成 組織架構圖,人員彙報關係等仍是須要用到以前的 jquery插件。好比:
npm install jquery --save
將$變量掛載到window下面,能夠在項目中直接使用$,不用再引用vue
//修改webpack配置文件: plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ]
webpack支持ES6的import,requirejs,commonjs語法,能夠用CMD, AMD的方式引用。
define(["jquery"],function($){ ... var initialChart = function(data){ //插件邏輯 } ... $(function(){ //頁面邏輯 }) ... return{ initialChart:initialChart //導出函數 } })
function orgOrgChart(data){ //插件邏輯 } $(function(){ //頁面邏輯 }) module.exports.orgOrgChart = orgOrgChart //導出函數
import {initialChart} from '../../es5Components/emp-orgChart.js' import {orgOrgChart} from '../../es5Components/emp-orgChart.js' ... componentDidMount(){ initialChart(this.state.data); orgOrgChart(this.state.data) } ....