webpack 把我將自己vue工程中的多個業(yè)務(wù).js 打包成xxx.xxx.js 后，在新的Vue項目中該如何引用

問題描述

webpack將多個JS 打包，作為一個庫來使用，該怎么在其他項目中引用

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

生成了 一個study.xxx.js 這個是我將多個js文件一起打包的 ? commonjs是提取的公用方法。
我將生成的包拉進(jìn)了一個新工程里；在新工程引用了這個文件。但當(dāng)我使用其中的方法時報錯：'webpackJsonp' is not defined 。
網(wǎng)絡(luò)上很多人都是發(fā)布的時候報錯：其實是index.html中引用順序的問題，先引用webpackjsonp的定義，才能再引用用xxx.xxx.js；而我的是在VUE項目中 而且是編譯之前不存在html。
這個錯誤原因就是 webpackjsonP未定義；后來我發(fā)現(xiàn)公用方法commonjs中定義了 webpackjsonp。我又將commonjs引入

import './libs/common'
import s from './libs/study.37510244c0489513ba21'
export default {
  name: 'App',
  mounted () {
    s.sleep()
  }
}

是當(dāng)我編譯的時候卻是 commonjs內(nèi)容格式錯誤。

  ?  http://eslint.org/docs/rules/key-spacing  
     src/libs/common.js:1:379
     Missing space before value for key 'i'

這篇blog?https://www.cnblogs.com/bilib...?

我看了一下，覺得我打成的應(yīng)該是插件之類的，應(yīng)該用插件之類的引用方式，

在入口文件 main.js 中

require('./libs/common')

結(jié)果還是一樣common格式錯誤

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

問題1：webpack打包之后的文件到底是個什么？插件？庫？

問題2： webpack打包之后的文件可以作為一個sdk使用嗎？

問題3：正確的使用方式改怎么用？

問題4：應(yīng)該用webpack.library嗎？

問題5：?難道打成的包這能在html中使用？vue中不能用

回答

編輯回答

菊外人

針對你末尾的問題：

webpack 的打包方式有很多種，既可以是一個 bundle（混合了一堆JS代碼的文件）也可以是一個 library（類似 jQuery 這樣有明確的全局命名等），注意這里的 bundle 和 library 只是為了方便理解而說的，并不精確。建議你看一下 webpack 編譯后的文件，會有更深的理解。
可以，但是更準(zhǔn)確的描述應(yīng)該是一個 library （類似 jQuery 這樣的庫）。通過 webpack 的 target 屬性可以進(jìn)行設(shè)置（library）。
比如你打包出來了一個 library（類似 jQuery 或者一個 UI 庫），那么直接把 library 復(fù)制到你想引用的項目里去引用就行了，不管是 require 還是直接 script src（需要打包成 umd 模塊）。
對。
取決于你模塊的輸出規(guī)范，是 CommonJS，CMD，AMD 還是 UMD（通用）。

最后總結(jié)一下，你所說的 sdk 實際上就是一個庫。而這個庫應(yīng)該單獨拿出來維護(hù)，就像 jQuery 是一個倉庫，Bootstrap 是一個倉庫，這兩個倉庫的輸出的 js 文件，都是單獨編譯的，而不是放在一起編譯。所以你的庫不應(yīng)該和項目放在同一套 webpack 配置下去編譯。應(yīng)該分開存放，sdk 編譯完以后，將編譯后的文件放到需要使用的項目中去引用?？梢詤⒖家恍┗?webpack 構(gòu)建工具的庫的源碼，比如 ant-design，element-ui 等等。

當(dāng)然，并不是 webpack 做不到在一個項目中同時編譯兩份代碼。只是這樣做會非常不好維護(hù)。

2017年10月27日 01:47