6.使用Bower部署第三方框架库

使用Bower部署第三方框架库

示例部署Echarts

1、全局安装Bower（初次使用）

npm install -g bower

2、在项目根目录下初始化Bower（项目中初次使用）

bower init

在项目根目录下会生成bower.json文件。

3、使用Bower安装Echarts

bower install echarts --save

project
├── bower_components
│   └── echarts 
├── bower.json
└── src                     
    └── views               
        └── 页面名称
            ├── index.html
            └── index.js     #页面JS入口文件
            

4、在bower.json中配置Echarts

//bower.json
{
  "name": "test1",
  "description": "",
  "main": "",
  "authors": [
    "CYB前端小组"
  ],
  "dependencies": {
    "echarts": "^4.1.0"
  },
  "overrides": {
    "echarts": {
      "main": [
        "dist/echarts.js"
      ]
    }
   }
}

echarts.js会被自动插入到html页面的<!-- inject:vendor:js --> <!-- endinject -->位置。

如果有样式和字体页文件页可以在bower.json中配置，比如bootstrap

"overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js",
        "dist/fonts/**/*.*"
      ]
    }
}

发布代码时会自动将样式和字体文件输出到static/css和static/fonts目录。

5、在项目根目录的webpack.config.js中配置Echarts

//webpack.config.js
module.exports = {
  externals: {
    echarts: 'echarts'
  }
}

6、在src/views/页面名称/index.js文件引入使用Echarts

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

发布代码时会自动合并第三框架库并生成vendor-bower.js或vendor-bower.css。