提交 e8d7b348 编写于 作者: D dolymood

build: docs

上级 f7370256
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.e736584baff72088d8e02f0e5ba5ffe6.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.6a85cf185d82280a3a5e.js></script><script type=text/javascript src=js/app.fa0cb9a0b5250265a321.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.517dfb08479038643ffc3dbe6520d095.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.6a85cf185d82280a3a5e.js></script><script type=text/javascript src=js/app.cf0832804bf1f884f85f.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.11d01ff7beec7d1e2b4088bea55b0bcd.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.370d99894fcf2f3b634b.js></script><script type=text/javascript src=/cube-ui/js/vendor.791b438f74325218ad2d.js></script><script type=text/javascript src=/cube-ui/js/app.57b873d06a5bf087d7c0.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.11d01ff7beec7d1e2b4088bea55b0bcd.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.27e50c3f9f21cde6afd5.js></script><script type=text/javascript src=/cube-ui/js/vendor.791b438f74325218ad2d.js></script><script type=text/javascript src=/cube-ui/js/app.57b873d06a5bf087d7c0.js></script></body></html>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
webpackJsonp([25],{Po76:function(e,s,t){var a=t("VU/8")(null,t("f3V4"),null,null,null);e.exports=a.exports},f3V4:function(e,s){e.exports={render:function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("section",[t("h2",{attrs:{id:"后编译"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-后编译-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" 后编译")]),e._v(" "),t("p",[e._v("后编译指的是应用依赖的 NPM 包并不需要在发布前编译,而是随着应用编译打包的时候一块编译。")]),e._v(" "),e._m(0),e._v(" "),t("h3",{attrs:{id:"背景"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-背景-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" 背景")]),e._v(" "),t("p",[e._v("使用 webpack + babel 开发应用越来越多,而且一般都是通过 NPM 进行包管理的,这样依赖包越来越多,这些依赖包也是使用的 ES2015+ 开发的,所以每个依赖包都需要编译才能发布,这样编译后代码中往往后包含很多编译代码,所以为了消除这部分冗余,推荐大家使用后编译。")]),e._v(" "),t("h3",{attrs:{id:"优缺点"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-优缺点-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" 优缺点")]),e._v(" "),t("p",[e._v("优点:")]),e._v(" "),e._m(1),e._v(" "),t("p",[e._v("缺点:")]),e._v(" "),e._m(2),e._v(" "),t("h3",{attrs:{id:"约定"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-约定-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" 约定")]),e._v(" "),t("p",[e._v("考虑到有些应用会使用后编译,有些则只能使用编译好的依赖包,为了“争夺”入口,cube-ui 做了均衡,约定:")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),t("p",[e._v("这样,如果应用使用的是 webpack 2+,则默认走后编译,而如果使用的 webpack 1.x 则默认使用的是编译后内容;当然,这部分可以通过 webpack 的 alias 配置达到和版本无关效果。")]),e._v(" "),t("h3",{attrs:{id:"webpack配置使用"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-webpack配置使用-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" webpack 配置使用")]),e._v(" "),e._m(5),e._v(" "),t("p",[e._v("一个应用示例配置:")]),e._v(" "),e._m(6),e._v(" "),t("p",[e._v("在应用的 package.json 中增加 compileDependencies:")]),e._v(" "),e._m(7),e._v(" "),t("p",[e._v("如果说 A 还依赖 C 的话,只需要在 A 的 package.json 中指定 compileDependencies 即可:")]),e._v(" "),e._m(8)])},staticRenderFns:[function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[t("em",[e._v("注:")]),e._v(" 关于后编译更详细内容可参阅 "),t("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23"}},[e._v("webpack 应用编译优化之路")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("ul",[t("li",[e._v("公共的依赖可以实现共用,只此一份,重要的是只编译一次,建议通过 peerDependencies 管理依赖。")]),e._v(" "),t("li",[e._v("babel 转换 API(例如 babel-plugin-transform-runtime 或者 babel-polyfill)部分的代码只有一份。")]),e._v(" "),t("li",[e._v("不用每个依赖包都需要配置编译打包环节,甚至可以直接源码级别发布。")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("ul",[t("li",[e._v("主应用的 babel 配置需要能兼容依赖包的 babel 配置。")]),e._v(" "),t("li",[e._v("依赖包不能使用 alias、不能方便的使用 DefinePlugin(可以经过一次简单编译,但是不做 babel 处理)。")]),e._v(" "),t("li",[e._v("应用编译时间会变长。")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("blockquote",[t("p",[e._v("package.json 的 main 字段指向的就是编译后入口,而 module 字段指向的就是源码入口。")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[t("em",[e._v("关于 "),t("a",{attrs:{href:"https://github.com/rollup/rollup/wiki/pkg.module"}},[e._v("pkg.module")])])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[e._v("后编译的场景是极有可能产生嵌套的情况,而且对于每个依赖包而言应该自己管理自身需要后编译的依赖;为了解决这个问题,可以使用 "),t("a",{attrs:{href:"https://www.npmjs.com/package/webpack-post-compile-plugin"}},[e._v("webpack-post-compile-plugin")]),e._v(",只需要在应用或者 NPM 包自身的 package.json 中通过 compileDependencies 来指定自身需要后编译依赖的包名。")])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[e._v("// webpack.config.js")]),e._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[e._v("var")]),e._v(" PostCompilePlugin = "),t("span",{attrs:{class:"hljs-built_in"}},[e._v("require")]),e._v("("),t("span",{attrs:{class:"hljs-string"}},[e._v("'webpack-post-compile-plugin'")]),e._v(")\n\n"),t("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(".exports = {\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("rules")]),e._v(": [\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("test")]),e._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[e._v("/\\.js$/")]),e._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("loader")]),e._v(": "),t("span",{attrs:{class:"hljs-string"}},[e._v("'babel-loader'")]),e._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("include")]),e._v(": [\n resolve("),t("span",{attrs:{class:"hljs-string"}},[e._v("'src'")]),e._v(")\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n plugins: [\n "),t("span",{attrs:{class:"hljs-keyword"}},[e._v("new")]),e._v(" PostCompilePlugin()\n ]\n}\n")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-json"}},[e._v("// package.json\n{\n // ...\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v('"compileDependencies"')]),e._v(": ["),t("span",{attrs:{class:"hljs-string"}},[e._v('"A"')]),e._v(", "),t("span",{attrs:{class:"hljs-string"}},[e._v('"B"')]),e._v("]\n // ...\n}\n")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-json"}},[e._v("// A package.json\n{\n // ...\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v('"compileDependencies"')]),e._v(": ["),t("span",{attrs:{class:"hljs-string"}},[e._v('"C"')]),e._v("]\n // ...\n}\n")])])}]}},hvjf:function(e,s,t){e.exports=t("Po76")}});
\ No newline at end of file
webpackJsonp([25],{Po76:function(s,e,t){var a=t("VU/8")(null,t("f3V4"),null,null,null);s.exports=a.exports},f3V4:function(s,e){s.exports={render:function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("section",[t("h2",{attrs:{id:"后编译"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-后编译-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 后编译")]),s._v(" "),t("p",[s._v("后编译指的是应用依赖的 NPM 包并不需要在发布前编译,而是随着应用编译打包的时候一块编译。")]),s._v(" "),s._m(0),s._v(" "),t("h3",{attrs:{id:"背景"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-背景-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 背景")]),s._v(" "),t("p",[s._v("使用 webpack + babel 开发应用越来越多,而且一般都是通过 NPM 进行包管理的,这样依赖包越来越多,这些依赖包也是使用的 ES2015+ 开发的,所以每个依赖包都需要编译才能发布,这样编译后代码中往往后包含很多编译代码,所以为了消除这部分冗余,推荐大家使用后编译。")]),s._v(" "),t("h3",{attrs:{id:"优缺点"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-优缺点-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 优缺点")]),s._v(" "),t("p",[s._v("优点:")]),s._v(" "),s._m(1),s._v(" "),t("p",[s._v("缺点:")]),s._v(" "),s._m(2),s._v(" "),t("h3",{attrs:{id:"约定"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-约定-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 约定")]),s._v(" "),t("p",[s._v("考虑到有些应用会使用后编译,有些则只能使用编译好的依赖包,为了“争夺”入口,cube-ui 做了均衡,约定:")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),t("p",[s._v("这样,如果应用使用的是 webpack 2+,则默认走后编译,而如果使用的 webpack 1.x 则默认使用的是编译后内容;当然,这部分可以通过 webpack 的 alias 配置达到和版本无关效果。")]),s._v(" "),t("h3",{attrs:{id:"webpack配置使用"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-webpack配置使用-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" webpack 配置使用")]),s._v(" "),s._m(5),s._v(" "),t("p",[s._v("一个应用示例配置:")]),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),t("p",[s._v("或者你也可以在应用的 package.json 中增加 compileDependencies:")]),s._v(" "),s._m(9),s._v(" "),t("p",[s._v("如果说 A 还依赖 C 的话,只需要在 A 的 package.json 中指定 compileDependencies 即可:")]),s._v(" "),s._m(10)])},staticRenderFns:[function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("p",[t("em",[s._v("注:")]),s._v(" 关于后编译更详细内容可参阅 "),t("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23"}},[s._v("webpack 应用编译优化之路")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("ul",[t("li",[s._v("公共的依赖可以实现共用,只此一份,重要的是只编译一次,建议通过 peerDependencies 管理依赖。")]),s._v(" "),t("li",[s._v("babel 转换 API(例如 babel-plugin-transform-runtime 或者 babel-polyfill)部分的代码只有一份。")]),s._v(" "),t("li",[s._v("不用每个依赖包都需要配置编译打包环节,甚至可以直接源码级别发布。")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("ul",[t("li",[s._v("主应用的 babel 配置需要能兼容依赖包的 babel 配置。")]),s._v(" "),t("li",[s._v("依赖包不能使用 alias、不能方便的使用 DefinePlugin(可以经过一次简单编译,但是不做 babel 处理)。")]),s._v(" "),t("li",[s._v("应用编译时间会变长。")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("blockquote",[t("p",[s._v("package.json 的 main 字段指向的就是编译后入口,而 module 字段指向的就是源码入口。")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("p",[t("em",[s._v("关于 "),t("a",{attrs:{href:"https://github.com/rollup/rollup/wiki/pkg.module"}},[s._v("pkg.module")])])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("p",[s._v("后编译的场景是极有可能产生嵌套的情况,而且对于每个依赖包而言应该自己管理自身需要后编译的依赖;为了解决这个问题,可以使用 "),t("a",{attrs:{href:"https://www.npmjs.com/package/webpack-post-compile-plugin"}},[s._v("webpack-post-compile-plugin")]),s._v(",你只需要在你的 NPM 包自身的 package.json 中声明 "),t("code",{pre:!0},[s._v("postCompile: true")]),s._v(" 或者你的应用的 package.json 中通过 compileDependencies 来指定自身需要后编译依赖的包名。")])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("// webpack.config.js")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" PostCompilePlugin = "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'webpack-post-compile-plugin'")]),s._v(")\n\n"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": [\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.js$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'babel-loader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("include")]),s._v(": [\n resolve("),t("span",{attrs:{class:"hljs-string"}},[s._v("'src'")]),s._v(")\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n plugins: [\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" PostCompilePlugin()\n ]\n}\n")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("p",[s._v("如果你能控制你应用的所有的依赖包,直接在每个依赖包的 package.json 中设置 "),t("code",{pre:!0},[s._v("postCompile: true")]),s._v(" 即可:")])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"your-one-pkg"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"postCompile"')]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n}\n")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("// package.json\n{\n // ...\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"compileDependencies"')]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"A"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"B"')]),s._v("]\n // ...\n}\n")])])},function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("// A package.json\n{\n // ...\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"compileDependencies"')]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"C"')]),s._v("]\n // ...\n}\n")])])}]}},hvjf:function(s,e,t){s.exports=t("Po76")}});
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
webpackJsonp([67],{"1cY+":function(e,t,s){e.exports=s("OC99")},OC99:function(e,t,s){var a=s("VU/8")(null,s("nNL9"),null,null,null);e.exports=a.exports},nNL9:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("section",[s("h2",{attrs:{id:"Post-compile"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-Post-compile-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Post-compile")]),e._v(" "),s("p",[e._v("Post-compile means the NPM packages don't need to be compiled before published, and they will be compiled along with the application's compiling.")]),e._v(" "),e._m(0),e._v(" "),s("h3",{attrs:{id:"Background"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-Background-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Background")]),e._v(" "),s("p",[e._v("More and more applications are developed with webpack + babel, and commonly use NPM to manage packages. With the growing of the number of package dependencies which are also developed with ES2015+ and need to be compiled before published, the final compiled code usually contains a lot of compiling code. Therefore, to eliminate the redundancy, we recommend post-compile.")]),e._v(" "),s("h3",{attrs:{id:"Prosandcons"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-Prosandcons-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Pros and cons")]),e._v(" "),s("p",[e._v("Pros:")]),e._v(" "),e._m(1),e._v(" "),s("p",[e._v("Cons:")]),e._v(" "),e._m(2),e._v(" "),s("h3",{attrs:{id:"Rules"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-Rules-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Rules")]),e._v(" "),s("p",[e._v("Considering some applications can not use post-compile, cube-ui used the rule:")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),s("p",[e._v("Post-compile is used by default if you use webpack 2+. Of course, you can use the webpack alias configuration to change the default behavior.")]),e._v(" "),s("h3",{attrs:{id:"webpackdemo"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-webpackdemo-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" webpack demo")]),e._v(" "),e._m(5),e._v(" "),s("p",[e._v("An example of your application webpack configuration:")]),e._v(" "),e._m(6),e._v(" "),e._m(7),e._v(" "),e._m(8),e._v(" "),e._m(9),e._v(" "),e._m(10)])},staticRenderFns:[function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("blockquote",[s("p",[e._v("Notes: For more detailed content about post-compile, see "),s("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23"}},[e._v("webpack 应用编译优化之路")]),e._v(".")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ul",[s("li",[e._v("Common dependencies can be shared and only need to be compiled once.")]),e._v(" "),s("li",[e._v("Only one copy of babel-plugin-transform-runtime or babel-polyfill code.")]),e._v(" "),s("li",[e._v("The NPM packages don't need to be compiled before published.")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ul",[s("li",[e._v("The application's babel configuration needs to be compatible with the NPM packages' babel configuration.")]),e._v(" "),s("li",[e._v("The NPM packages can't use alias and DefinePlugin (you can use them and compiled before published but don't need to use babel).")]),e._v(" "),s("li",[e._v("The application's compiling time will be longer.")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("blockquote",[s("p",[e._v("The main field in package.json is the compiled entry point and the module field is the source entry point.")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[s("em",[e._v("About "),s("a",{attrs:{href:"https://github.com/rollup/rollup/wiki/pkg.module"}},[e._v("pkg.module")])])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("The "),s("a",{attrs:{href:"https://www.npmjs.com/package/webpack-post-compile-plugin"}},[e._v("webpack-post-compile-plugin")]),e._v(" is used to resolve the nested post-compile NPM packages.")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[s("span",{attrs:{class:"hljs-comment"}},[e._v("// webpack.config.js")]),e._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[e._v("var")]),e._v(" PostCompilePlugin = "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("require")]),e._v("("),s("span",{attrs:{class:"hljs-string"}},[e._v("'webpack-post-compile-plugin'")]),e._v(")\n\n"),s("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(".exports = {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("rules")]),e._v(": [\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("test")]),e._v(": "),s("span",{attrs:{class:"hljs-regexp"}},[e._v("/\\.js$/")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("loader")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'babel-loader'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("include")]),e._v(": [\n resolve("),s("span",{attrs:{class:"hljs-string"}},[e._v("'src'")]),e._v(")\n ]\n },\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n ]\n },\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n plugins: [\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("new")]),e._v(" PostCompilePlugin()\n ]\n}\n")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("Add "),s("code",{pre:!0},[e._v("compileDependencies:")]),e._v(" to the application's package.json:")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[s("span",{attrs:{class:"hljs-comment"}},[e._v("// package.json")]),e._v("\n{\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),s("span",{attrs:{class:"hljs-string"}},[e._v('"compileDependencies"')]),e._v(": ["),s("span",{attrs:{class:"hljs-string"}},[e._v('"A"')]),e._v(", "),s("span",{attrs:{class:"hljs-string"}},[e._v('"B"')]),e._v("]\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n}\n")])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("If "),s("code",{pre:!0},[e._v("A")]),e._v(" package have a dependency on "),s("code",{pre:!0},[e._v("C")]),e._v(" which is needed to be post compiled, just add "),s("code",{pre:!0},[e._v("compileDependencies")]),e._v(" to "),s("code",{pre:!0},[e._v("A")]),e._v("'s package.json:")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-json"}},[e._v("// A package.json\n{\n // ...\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v('"compileDependencies"')]),e._v(": ["),s("span",{attrs:{class:"hljs-string"}},[e._v('"C"')]),e._v("]\n // ...\n}\n")])])}]}}});
\ No newline at end of file
webpackJsonp([67],{"1cY+":function(e,s,t){e.exports=t("OC99")},OC99:function(e,s,t){var a=t("VU/8")(null,t("nNL9"),null,null,null);e.exports=a.exports},nNL9:function(e,s){e.exports={render:function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("section",[t("h2",{attrs:{id:"Post-compile"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Post-compile-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Post-compile")]),e._v(" "),t("p",[e._v("Post-compile means the NPM packages don't need to be compiled before published, and they will be compiled along with the application's compiling.")]),e._v(" "),e._m(0),e._v(" "),t("h3",{attrs:{id:"Background"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Background-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Background")]),e._v(" "),t("p",[e._v("More and more applications are developed with webpack + babel, and commonly use NPM to manage packages. With the growing of the number of package dependencies which are also developed with ES2015+ and need to be compiled before published, the final compiled code usually contains a lot of compiling code. Therefore, to eliminate the redundancy, we recommend post-compile.")]),e._v(" "),t("h3",{attrs:{id:"Prosandcons"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Prosandcons-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Pros and cons")]),e._v(" "),t("p",[e._v("Pros:")]),e._v(" "),e._m(1),e._v(" "),t("p",[e._v("Cons:")]),e._v(" "),e._m(2),e._v(" "),t("h3",{attrs:{id:"Rules"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Rules-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" Rules")]),e._v(" "),t("p",[e._v("Considering some applications can not use post-compile, cube-ui used the rule:")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),t("p",[e._v("Post-compile is used by default if you use webpack 2+. Of course, you can use the webpack alias configuration to change the default behavior.")]),e._v(" "),t("h3",{attrs:{id:"webpackdemo"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-webpackdemo-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),e._v(" webpack demo")]),e._v(" "),e._m(5),e._v(" "),t("p",[e._v("An example of your application webpack configuration:")]),e._v(" "),e._m(6),e._v(" "),t("p",[e._v("And if you can control all the packages which you want to post compile, you can just add postCompile: true to the packages package.json:")]),e._v(" "),e._m(7),e._v(" "),t("p",[e._v("Or you can add compileDependencies to your application package.json:")]),e._v(" "),e._m(8),e._v(" "),e._m(9),e._v(" "),e._m(10)])},staticRenderFns:[function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("blockquote",[t("p",[e._v("Notes: For more detailed content about post-compile, see "),t("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23"}},[e._v("webpack 应用编译优化之路")]),e._v(".")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("ul",[t("li",[e._v("Common dependencies can be shared and only need to be compiled once.")]),e._v(" "),t("li",[e._v("Only one copy of babel-plugin-transform-runtime or babel-polyfill code.")]),e._v(" "),t("li",[e._v("The NPM packages don't need to be compiled before published.")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("ul",[t("li",[e._v("The application's babel configuration needs to be compatible with the NPM packages' babel configuration.")]),e._v(" "),t("li",[e._v("The NPM packages can't use alias and DefinePlugin (you can use them and compiled before published but don't need to use babel).")]),e._v(" "),t("li",[e._v("The application's compiling time will be longer.")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("blockquote",[t("p",[e._v("The main field in package.json is the compiled entry point and the module field is the source entry point.")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[t("em",[e._v("About "),t("a",{attrs:{href:"https://github.com/rollup/rollup/wiki/pkg.module"}},[e._v("pkg.module")])])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[e._v("The "),t("a",{attrs:{href:"https://www.npmjs.com/package/webpack-post-compile-plugin"}},[e._v("webpack-post-compile-plugin")]),e._v(" is used to resolve the nested post-compile NPM packages.")])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[e._v("// webpack.config.js")]),e._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[e._v("var")]),e._v(" PostCompilePlugin = "),t("span",{attrs:{class:"hljs-built_in"}},[e._v("require")]),e._v("("),t("span",{attrs:{class:"hljs-string"}},[e._v("'webpack-post-compile-plugin'")]),e._v(")\n\n"),t("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(".exports = {\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[e._v("module")]),e._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("rules")]),e._v(": [\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("test")]),e._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[e._v("/\\.js$/")]),e._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("loader")]),e._v(": "),t("span",{attrs:{class:"hljs-string"}},[e._v("'babel-loader'")]),e._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v("include")]),e._v(": [\n resolve("),t("span",{attrs:{class:"hljs-string"}},[e._v("'src'")]),e._v(")\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n ]\n },\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n plugins: [\n "),t("span",{attrs:{class:"hljs-keyword"}},[e._v("new")]),e._v(" PostCompilePlugin()\n ]\n}\n")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),t("span",{attrs:{class:"hljs-string"}},[e._v('"name"')]),e._v(": "),t("span",{attrs:{class:"hljs-string"}},[e._v('"your-one-pkg"')]),e._v(",\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),t("span",{attrs:{class:"hljs-string"}},[e._v('"postCompile"')]),e._v(": "),t("span",{attrs:{class:"hljs-literal"}},[e._v("true")]),e._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n}\n")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[e._v("// package.json")]),e._v("\n{\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n "),t("span",{attrs:{class:"hljs-string"}},[e._v('"compileDependencies"')]),e._v(": ["),t("span",{attrs:{class:"hljs-string"}},[e._v('"A"')]),e._v(", "),t("span",{attrs:{class:"hljs-string"}},[e._v('"B"')]),e._v("]\n "),t("span",{attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n}\n")])])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("p",[e._v("If "),t("code",{pre:!0},[e._v("A")]),e._v(" package have a dependency on "),t("code",{pre:!0},[e._v("C")]),e._v(" which is needed to be post compiled, just add "),t("code",{pre:!0},[e._v("compileDependencies")]),e._v(" to "),t("code",{pre:!0},[e._v("A")]),e._v("'s package.json:")])},function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-json"}},[e._v("// A package.json\n{\n // ...\n "),t("span",{attrs:{class:"hljs-attr"}},[e._v('"compileDependencies"')]),e._v(": ["),t("span",{attrs:{class:"hljs-string"}},[e._v('"C"')]),e._v("]\n // ...\n}\n")])])}]}}});
\ No newline at end of file
此差异已折叠。
此差异已折叠。
!function(e){function c(f){if(a[f])return a[f].exports;var d=a[f]={i:f,l:!1,exports:{}};return e[f].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var f=window.webpackJsonp;window.webpackJsonp=function(a,b,n){for(var r,t,o,u=0,i=[];u<a.length;u++)t=a[u],d[t]&&i.push(d[t][0]),d[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(f&&f(a,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var a={},d={88:0};c.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var b=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"61cf9a6fdc298b3588d5",1:"63aa46e68090c6adc843",2:"b05513eacea6b025bc8f",3:"7d62fbe3786e893cc42e",4:"415f17002e53bbea6722",5:"0ffd691223aeba06d527",6:"895522cc1e070b001975",7:"c3739851037aee6b6a6e",8:"9679779de06fa2c203a5",9:"8137f254b1460b481558",10:"6a32c214cb58a51e41ef",11:"fca8be0d3e957f0d81cc",12:"f5104970622160c56ea0",13:"238568fdec73355962fb",14:"c3cc516b23ecc8d821aa",15:"f8a45a0f1c77686ee9c1",16:"cb4adafe4c0d28305f92",17:"9eb9d6f95850e8c53330",18:"8582310842dae1c00da6",19:"af8cd41c56c048e7e74f",20:"32b5f56ad8727fdf2c25",21:"5a95626f892944ce441b",22:"76d1cc9526f2ae5e19d2",23:"eeb670ddd074c8a68a4b",24:"c8f1d623477d5b9582df",25:"566eb5af8757e91ea9fa",26:"944918111d93260e16fd",27:"c9babf224750b7c8b887",28:"5d0fb560727f728261fa",29:"6fce2ed27f2e45fb5bfb",30:"9c0ea2b4753b071d496f",31:"cccf8d04394dbffe5f36",32:"10a409bdd56cee568033",33:"ee61122e1fff4df9bc98",34:"f36abc3daac967f72b7c",35:"d77ffd36881ea2d53a67",36:"67fa903912a0dc509dc0",37:"262f75f16cd5dc700f2c",38:"7f2e043ada0b027bf6a0",39:"586ced0e01a6bccfd245",40:"1e9235021243fcbefe09",41:"a789c27140abed970d37",42:"6fef30504e60390339be",43:"c5d2f903c32e7b35732d",44:"80d86c26a905c6934b80",45:"ccd1e903dc9bf81b592d",46:"8bb0df63a1926031df82",47:"25ebac6a66fd54e5c586",48:"858075c636de13a4c818",49:"e4ce065c83991ef7691e",50:"11e9ef25814d7ddc9beb",51:"a25156fadb60893ea21f",52:"0c8fcb4c201986631924",53:"b064c1f27bd531d87da2",54:"ba6a18c43896c3f64f4d",55:"701c41043bca20ba781f",56:"41c0b8a5b0fbaf9e4b31",57:"04818257ce543253d96f",58:"c914457e833fb4c3f231",59:"b8a803737e0674540c17",60:"c78732681ee8d34ed9fb",61:"fdaff9fe6c0c314d02ec",62:"5dba45fa48b46c7f653c",63:"5647a110619c425a726e",64:"1dac84f0ca639f525e45",65:"55b459679b019869e891",66:"9e4a90b0641770d93ce2",67:"75280effe34e9238fc3d",68:"a9ad8c273407e9daae22",69:"c26ba870c8cf6c169456",70:"2daba8365ba4d304acbc",71:"cb2adf4c904ac50937bb",72:"1d9744952f131257e15c",73:"a3817f682c869bfca888",74:"ea180ee96e82170eb061",75:"4acd4a101393fcffdda2",76:"30f4dea7ecfef679677f",77:"9f2652246597241186fc",78:"2e0d3884194e2a30b636",79:"c3bd5ee00af4c959327f",80:"6b518a5d8ba3867a8e00",81:"f671e241e7e0fd576088",82:"60c7144796313ad4c06c",83:"c63e34ab21eb7cd1f441",84:"b58b97c72e198264a031",85:"9f37330b07526c211790"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),b},c.m=e,c.c=a,c.d=function(e,f,a){c.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:a})},c.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(f,"a",f),f},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){function c(f){if(a[f])return a[f].exports;var d=a[f]={i:f,l:!1,exports:{}};return e[f].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var f=window.webpackJsonp;window.webpackJsonp=function(a,b,n){for(var r,t,o,u=0,i=[];u<a.length;u++)t=a[u],d[t]&&i.push(d[t][0]),d[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(f&&f(a,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var a={},d={88:0};c.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var b=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"61cf9a6fdc298b3588d5",1:"63aa46e68090c6adc843",2:"b05513eacea6b025bc8f",3:"7d62fbe3786e893cc42e",4:"415f17002e53bbea6722",5:"0ffd691223aeba06d527",6:"895522cc1e070b001975",7:"c3739851037aee6b6a6e",8:"9679779de06fa2c203a5",9:"8137f254b1460b481558",10:"6a32c214cb58a51e41ef",11:"fca8be0d3e957f0d81cc",12:"f5104970622160c56ea0",13:"238568fdec73355962fb",14:"c3cc516b23ecc8d821aa",15:"f8a45a0f1c77686ee9c1",16:"cb4adafe4c0d28305f92",17:"9eb9d6f95850e8c53330",18:"8582310842dae1c00da6",19:"af8cd41c56c048e7e74f",20:"32b5f56ad8727fdf2c25",21:"5a95626f892944ce441b",22:"76d1cc9526f2ae5e19d2",23:"eeb670ddd074c8a68a4b",24:"06c3a48667d85b349e45",25:"75f0c5858eed1c99d073",26:"944918111d93260e16fd",27:"c9babf224750b7c8b887",28:"5d0fb560727f728261fa",29:"6fce2ed27f2e45fb5bfb",30:"9c0ea2b4753b071d496f",31:"cccf8d04394dbffe5f36",32:"10a409bdd56cee568033",33:"ee61122e1fff4df9bc98",34:"f36abc3daac967f72b7c",35:"d77ffd36881ea2d53a67",36:"67fa903912a0dc509dc0",37:"74b90f313c64cd70b8a4",38:"7f2e043ada0b027bf6a0",39:"586ced0e01a6bccfd245",40:"1e9235021243fcbefe09",41:"a789c27140abed970d37",42:"6fef30504e60390339be",43:"c5d2f903c32e7b35732d",44:"80d86c26a905c6934b80",45:"ccd1e903dc9bf81b592d",46:"8bb0df63a1926031df82",47:"25ebac6a66fd54e5c586",48:"858075c636de13a4c818",49:"e4ce065c83991ef7691e",50:"11e9ef25814d7ddc9beb",51:"a25156fadb60893ea21f",52:"0c8fcb4c201986631924",53:"b064c1f27bd531d87da2",54:"ba6a18c43896c3f64f4d",55:"701c41043bca20ba781f",56:"41c0b8a5b0fbaf9e4b31",57:"04818257ce543253d96f",58:"c914457e833fb4c3f231",59:"b8a803737e0674540c17",60:"c78732681ee8d34ed9fb",61:"fdaff9fe6c0c314d02ec",62:"5dba45fa48b46c7f653c",63:"5647a110619c425a726e",64:"1dac84f0ca639f525e45",65:"55b459679b019869e891",66:"de986f9b8456f9310497",67:"7f4a9e4868d7d4a3f63b",68:"a9ad8c273407e9daae22",69:"c26ba870c8cf6c169456",70:"2daba8365ba4d304acbc",71:"cb2adf4c904ac50937bb",72:"1d9744952f131257e15c",73:"a3817f682c869bfca888",74:"ea180ee96e82170eb061",75:"4acd4a101393fcffdda2",76:"30f4dea7ecfef679677f",77:"9f2652246597241186fc",78:"2e0d3884194e2a30b636",79:"467dee2eee9a9957cb2f",80:"6b518a5d8ba3867a8e00",81:"f671e241e7e0fd576088",82:"60c7144796313ad4c06c",83:"c63e34ab21eb7cd1f441",84:"b58b97c72e198264a031",85:"9f37330b07526c211790"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),b},c.m=e,c.c=a,c.d=function(e,f,a){c.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:a})},c.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(f,"a",f),f},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册