精读《如何编译前端项目与组件》

[ascoders]

本周要精读的其实是笔者之前写过的代码，总结出一套对组件、项目通用的前端编译方案（主要指 babel gulp webpack 之类 bundle 或 es6 -> es3 的行为）。

如果你觉得自己项目编译方案也很完美，欢迎留言！

---

精读《如何编译前端项目与组件》

[giscafer]

这里有些关于编译学习的文章：giscafer/blog#21
之前学习了解收集的

[muzea]

@giscafer 就传统前端而言，更多的是bundle的含义，这里应该指的是 webpack 和 parcel 此类工具。

[ascoders]

@muzea 是的，现在前端构建方式很多，有 parcel, 有 webpack4，也有用 gulp + 一大堆插件，也有直接用 vue-cli 这种集成框架，或者 umi、nextjs 等通用集成框架的。各方案使用的人都很散，生态建设不集中，而且迁移不方便。

项目和组件的构建也存在替换构建工具的问题。

[muzea]

@ascoders webpack 之前大家的打包方式会比较多，webpack 出现以后大家的打包配置就开始统一了，否则也不会出现 parcel 这种东西。实际上能用的其实就 上古遗留的、webpack、parcel，这几种，还有一些类似 https://neutrinojs.org/ 这种生成 webpack 配置的。

如果要统一的话，那就是类似 neutrinojs 这样的一层抽象，到时候吐出不同工具的配置文件吧。

[giscafer]

@muzea 对打包构建包装做得比较全比较好的我觉得是 angular-cli

[liuxsen]

有没有 相关的webpack 项目配置分析？

[xingzhichen]

按装这样编译组件的话，按照文中的例子，我直接引用这个组件，但是我项目里面没有lodash，组件里面require('lodash')这样的话岂不无法运行？

[ascoders]

@xingzhichen 这种情况，组件的 package.json 写上 lodash 就会装在项目了呗。

[xingzhichen]

@xingzhichen 这种情况，组件的 package.json 写上 lodash 就会装在项目了呗。

那也就是说，这个编译组件不止是编译组件本身，我也需要给这个编译后的组件一个带package.json 的环境构成一个完整的包。那事实上我感觉最好的方法是写一个插件根据最后的结果自动生成一个package.json文件。貌似是个不错的法子。我看element数组件库最后编译的组件像vue这种项目必有的就不打包在一起，其他需要引用的一些库，比如poper.js会单独放到utils下面使用。最后在组件里面也会直接保留require('utils/poper.js')不打包。

[ascoders]

@xingzhichen 组件编译场景下，看上去是可以在打包脚本后，扫描一遍源码，把 import 部分填入 package.json deps 中，再自动剔除一些重复的依赖。

webpack 用来构建组件还是挺好用的。

[muzea]

现在已经有了 peerDependencies ，webpack 也提供了 externals ，现阶段而言，有什么问题是不好解决的吗？

[xingzhichen]

现在已经有了 peerDependencies ，webpack 也提供了 externals ，现阶段而言，有什么问题是不好解决的吗？

对，忘了peerDependencies这个神器。

[LPegasus]

使用 webpack 4.29，如何避免生成 webpack 自己的模块加载器代码？这段代码不去掉，导致所有组件都有重复的加载器代码。

[LPegasus]

使用 webpack 4.29，如何避免生成 webpack 自己的模块加载器代码？这段代码不去掉，导致所有组件都有重复的加载器代码。

还有是否在文档里补充一下配置，目前文档中的配置在 4.29 是跑不起来的。tsx rule 这边的配置用了个数组，也是非法的参数。

export webpackConfig = {
  target: 'node',
  output: {
    libraryTarget: 'commonjs2'
  },
  ...
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'babel-loader',
      options: {...}
    }]
  }
}

在实践中觉得这种方案有几个问题：

1. ts 项目无 d.ts 文件，需要另外制作
2. nodeExternals 对于 monorepo 项目不友好，这个插件很久没人维护了

感觉组件还是不适合打包发布

[ascoders]

@LPegasus Webpack4 配置可以看看我们团队正在用的工具里的源码：https://github.com/prijs/pri/blob/master/src/utils/webpack-config.ts#L130

另外 “ts 项目无 d.ts 文件，需要另外制作” 这句话没有看懂，能详细说明一下吗？