Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vue-cli 项目为开发/生产环境引用不同的外部 JS 库 #47

Closed
Dream4ever opened this issue Jun 14, 2018 · 0 comments
Closed

vue-cli 项目为开发/生产环境引用不同的外部 JS 库 #47

Dream4ever opened this issue Jun 14, 2018 · 0 comments
Labels
Front-end Everything you see and experience

Comments

@Dream4ever
Copy link
Owner

Dream4ever commented Jun 14, 2018 •
edited

需求描述

前面实现了 vue-cli 项目中引用 CDN 上的 JS/CSS 库，那么另一个问题就随之而来了：开发环境和生产环境，需要引用同一个 JS 库的不同版本，该如何实现？

方案调研

调研过程

之前研究 jantimon/html-webpack-plugin 这个 webpack 插件，看到官方文档中介绍用户可以自定义 index.html 或者页面模板的内容，从而尽量满足用户的个性化需求：

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    template: 'index.html'
  })
]
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

既然有这个功能，那么是不是可以编辑 webpack 的配置文件，从而实现在开发/生产环境下引用不同的 JS 库的需求呢？说干就干。

入选方案

应用过程

因为要在开发环境下和生产环境下分别引用不同的 JS 库，那么就需要先了解一下 webpack 是如何为两种环境传入不同的设置的。因为已经用了相当一段时间的 vue-cli 了，所以知道整体的配置流程，先在 config 目录下新建 cdn.js，内容如下：

// config/cdn.js
'use strict';

module.exports = {
  dev: {
+    vue: 'https://cdn.bootcss.com/vue/2.5.16/vue.js',
  },
  build: {
+    vue: 'https://cdn.bootcss.com/vue/2.5.16/vue.min.js',
  }
}

添加了开发环境和生产环境下要用的 vue 的链接之后，再设置这两种环境下的 webpack 编译配置：也就是编辑 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 中 html-webpack-plugin 插件的设置，这样才能在 index.html 中按需引用 JS 库：

// build/webpack.dev.conf.js
const cdn = require('../config/cdn');
...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
+       vueSrc: config.dev.vue,
      inject: true
    }),
  ]
// build/webpack.prod.conf.js
const cdn = require('../config/cdn');
...
  plugins: [
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
+       vueSrc: config.build.vue,
      inject: true,
    }),
  ]

最后再编辑 index.html，就可以在两种环境下分别引入不同版本的 JS 库了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>pages</title>
+     <script src="<%= htmlWebpackPlugin.options.vueSrc %>"></script>
  </head>
</html>

这样一来，webpack 就会根据当前设置的环境，自动为 index.html 引入对应的 JS 库，爽！

要点总结

之前总是觉得 webpack 非常复杂，现在再看，其实没那么可怕，把需要解决的问题一个个搞定，最后就会发现还是很简单的。
@Dream4ever Dream4ever added the Front-end Everything you see and experience label Jun 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Front-end Everything you see and experience
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Dream4ever