支持对依赖的内容进行转换 #109

nighca · 2019-09-04T11:37:25Z

目前默认会跳过对依赖（node_modules）中 Javascript 内容的转换：https://github.com/Front-End-Engineering-Cloud/builder/blob/a5def20a02dd0b5eb7221cb95506a621c6dab943/lib/webpack-config/addons/add-transform.js#L107-L110

但是有时候会出现一些依赖包本身 release 的内容对浏览器的支持度不满足我们的需要，这时候需要对这些依赖包的内容进行处理。为满足该需求，这里添加配置项 optimization.transformDeps，可以对这一行为进行配置，配置详情见 README.md 变更

添加测试 case: Front-End-Engineering-Cloud/samples@cd2bfa2

另外如果对 node_modules 的内容进行转换（主要是 babel 的处理），容易出现以下两个构建错误：（第二个问题在本 PR 中有对应变更进行规避）

TypeError: _typeof is not a function

输出：

Error: /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17234
    return e && "object" == _typeof(e) && "default" in e ? e.default : e;
                            ^
  TypeError: _typeof is not a function

  - index.html:17234 _interopDefault
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17234:27

  - index.html:17241 Object.../../../../../fec/builder/node_modules/react-hot-loader/dist/react-hot-loader.production.min.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17241:13

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17278 Object.../../../../../fec/builder/node_modules/react-hot-loader/index.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17278:20

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17381
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17381:91

  - index.html:17383 Object.<anonymous>
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17383:3

  - index.html:17433 Object../node_modules/@babel/runtime/helpers/typeof.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17433:30

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17290 Object.<anonymous>
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17290:61

原因：This is caused by double transpiling code

见 glimmerjs/glimmer-application-pipeline#87

exports is not defined

输出：

Error: /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17239
  Object.defineProperty(exports, "__esModule", {
                        ^
  ReferenceError: exports is not defined

  - index.html:17239 Module.../../../../../fec/builder/node_modules/react-hot-loader/dist/react-hot-loader.production.min.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17239:23

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17280 Object.../../../../../fec/builder/node_modules/react-hot-loader/index.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17280:20

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17424
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17424:91

  - index.html:17426 Module.<anonymous>
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17426:3

  - index.html:17476 Module../node_modules/@babel/runtime/helpers/typeof.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17476:30

  - index.html:21 __webpack_require__
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:21:30

  - index.html:17294 Module.<anonymous>
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17294:133

  - index.html:17338 Module.../../../../../fec/builder/node_modules/webpack/buildin/global.js
    /Users/yanghanxing/code/qbox/src/qiniu.com/rmb-web/portal-dynamic-entry/static/index.html:17338:30

原因：babel sourceType 配置不正确导致插入 import / require 有误

见：
babel/babel#8900
https://babeljs.io/docs/en/options#sourcetype

doxiaodong · 2019-09-05T03:05:33Z

这个配置是不是用正则更好一些，而且现在大部分包都是按照 cjs module(es5/es6) 的多版本打出的吧。

nighca · 2019-09-05T03:48:58Z

@doxiaodong

这个配置是不是用正则更好一些

JSON 对正则内容不友好，如果要支持复杂一点的情况这边可以（几乎）平滑地升级到通配符；

不过因为目前看到的场景基本都是特定包需要进行处理，在我看来暂时没有这种通配符/正则匹配的需求，所以先没有支持

而且现在大部分包都是按照 cjs module(es5/es6) 的多版本打出的吧

大部分是的，就是少部分不是，这种很蛋疼，毕竟我们要支持 IE11，一个解构或者可选参数就会把站点搞挂；

不过从我的角度来看，lib 都只提供某个约定的版本（比如 ES6）就好，然后具体项目的开发者对依赖也进行处理，这样是最科学的，毕竟只有项目的开发者才能确切知道自己想支持什么样的环境，这个任务没法很好地交给 lib 开发者解决；当然现状是另一回事 🤣

doxiaodong · 2019-09-05T03:53:50Z

其实对于这个不按约定的包，可以本地化，谨慎选择呀

nighca · 2019-09-05T03:56:48Z

其实对于这个不按约定的包，可以本地化，谨慎选择呀

”按照 cjs module(es5/es6) 的多版本打出“也不算约定啊，人家不做我觉得也没错...而且这样的库可能会越来越多的，毕竟国外大佬们早就放弃 IE 11 了，比如 https://github.com/jsdom/whatwg-url 这种，issue 里有人问类似的事儿，作者就直接回 IE11 is not target of this lib= =

doxiaodong · 2019-09-05T04:06:07Z

看看要不要模仿这个哈哈

"transformIgnorePatterns": [
    "node_modules/(?!lreact)"
],

nighca · 2019-09-05T05:17:17Z

@doxiaodong 哈哈这个是哪里的设定？主要区别是这个更偏底层一点，这个 PR 的 API 更上层、具体一点；另外它的角度是忽略哪些，这个 PR 的角度是不忽略哪些

doxiaodong · 2019-09-05T07:37:36Z

这个是 jest 的配置 https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string

nighca · 2019-09-09T04:01:56Z

@doxiaodong 我们讨论了下还是不按 jest 的来了，builder 的定位就是离基础实现远一点，离具体做的事情近一点（封装得更上层一点），这边是个典型的取舍：虽然会丧失灵活度，但是会对使用更友好

doxiaodong · 2019-09-09T06:54:02Z

es5 检测可以看看这个 https://github.com/acornjs/acorn

acorn.parse(source, {
    ecmaVersion: 5
});

对应 umi 的实现 https://github.com/umijs/umi-plugin-ecma5-validator

nighca · 2019-09-09T07:10:48Z

@doxiaodong 有道理，不过那个不是 cli，我换成 https://github.com/dollarshaveclub/es-check 这个了

我擦 node 6.x 没有 npx...

lzfee0227 · 2019-09-09T08:15:25Z

lib/webpack-config/addons/add-transform.js

+  if (Array.isArray(transformDeps)) {
+    return new RegExp(`node_modules/(?!(${transformDeps.join('|')})/).*`)
+  }
+  return transformDeps ? null : /node_modules\//


会不会这样比较好懂

if (typeof ** === boolean) { return ** ? null : /node_modules\// } return **

这里主要是考虑了下值为 undefined 等的边际情况

codingstar · 2019-09-09T12:04:30Z

lib/webpack-config/addons/add-transform.js

@@ -171,6 +189,13 @@ module.exports = (config, key, transform, buildConfig, post) => {
    return config
  }

+  // 针对后缀为 js 的 transform，控制范围（不对依赖做转换）


为啥特意限制一下呀，这个是不是太 hack 了。。毕竟从表面上看并看不出会有这个限制。。

@codingstar 你指哪个限制？

就是不 transform 后缀为 js 的文件。。。0 0 @nighca

@codingstar 是工程上的常见优化手段，基于两个前提：

很多包 release 的时候会做一遍 compile 的事情，甚至其内容可能不能重新被 compile，见 PR 中提到的 TypeError: _typeof is not a function 问题

babel 很慢，node_modules 内容很多，因此会大大影响构建效率

add optimization.transformDeps

fa4ac68

nighca force-pushed the exclude-configure branch from 18180d4 to fa4ac68 Compare September 4, 2019 11:46

nighca force-pushed the exclude-configure branch from 7e0132a to 7fa2a96 Compare September 9, 2019 07:10

nighca force-pushed the exclude-configure branch from 7fa2a96 to 8961497 Compare September 9, 2019 07:25

update samples

778b652

nighca force-pushed the exclude-configure branch from 8961497 to 778b652 Compare September 9, 2019 07:30

lzfee0227 reviewed Sep 9, 2019

View reviewed changes

codingstar reviewed Sep 9, 2019

View reviewed changes

v1.14.0

a507db8

nighca merged commit a6ceee5 into qiniu:master Sep 12, 2019

nighca mentioned this pull request Sep 16, 2019

💬 compile node_modules #106

Closed

nighca mentioned this pull request Aug 16, 2021

对项目依赖的处理 #141

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

支持对依赖的内容进行转换 #109

支持对依赖的内容进行转换 #109

nighca commented Sep 4, 2019 •

edited

Loading

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019 •

edited

Loading

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019 •

edited

Loading

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019

doxiaodong commented Sep 5, 2019 •

edited

Loading

nighca commented Sep 9, 2019

doxiaodong commented Sep 9, 2019 •

edited

Loading

nighca commented Sep 9, 2019 •

edited

Loading

lzfee0227 Sep 9, 2019

nighca Sep 12, 2019

codingstar Sep 9, 2019

nighca Sep 9, 2019

codingstar Sep 12, 2019

nighca Sep 12, 2019

支持对依赖的内容进行转换 #109

支持对依赖的内容进行转换 #109

Conversation

nighca commented Sep 4, 2019 • edited Loading

TypeError: _typeof is not a function

exports is not defined

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019 • edited Loading

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019 • edited Loading

doxiaodong commented Sep 5, 2019

nighca commented Sep 5, 2019

doxiaodong commented Sep 5, 2019 • edited Loading

nighca commented Sep 9, 2019

doxiaodong commented Sep 9, 2019 • edited Loading

nighca commented Sep 9, 2019 • edited Loading

lzfee0227 Sep 9, 2019

Choose a reason for hiding this comment

nighca Sep 12, 2019

Choose a reason for hiding this comment

codingstar Sep 9, 2019

Choose a reason for hiding this comment

nighca Sep 9, 2019

Choose a reason for hiding this comment

codingstar Sep 12, 2019

Choose a reason for hiding this comment

nighca Sep 12, 2019

Choose a reason for hiding this comment

nighca commented Sep 4, 2019 •

edited

Loading

nighca commented Sep 5, 2019 •

edited

Loading

nighca commented Sep 5, 2019 •

edited

Loading

doxiaodong commented Sep 5, 2019 •

edited

Loading

doxiaodong commented Sep 9, 2019 •

edited

Loading

nighca commented Sep 9, 2019 •

edited

Loading