用javascript构建原子设计开发生态系统
提问于 2016-07-01 00:42:08
最近，我们对开发不同类型UI组件的http://patternlab.io/ -approach非常感兴趣。开发新产品和增加UI组件的重用似乎非常好，也很容易。
然而，我们现在困在建造地狱，没有真正聪明的想法如何解决它。
问题：
my-awesome-project@0.0.1
├─┬ atoms
│ │ └── atom1
│ │ └── atom2
│ ├── molecules
│ │ └── molecule1 (depends on atom1 && atom2)
│ │ └── molecule2
│ ├── organisms
│ │ └── organism1 (depends of molecule1 & molecule2)
│ │ └── organism2我们使用browserify将包转到CSS & ES5。
当我更新一个atom1时，我需要重新编译molecule1和organism1，它变得越来越费力。如何构建一个可管理的javascript生态系统有什么好的实践吗？
生态系统的结构：
FirstAtom：package.json
{
"name": "first-atom",
"main": "dist/js/index.min.js"
}SecondAtom：package.json
{
"name": "second-atom",
"main": "dist/js/index.min.js"
}CombinationOfTwoAtoms：package.json
{
"name": "combination-of-two-atoms",
"main": "dist/js/index.min.js"
"devDependencies": {
"first-atom": "file:../../atoms/first-atom/",
"second-atom": "file:../../atoms/second-atom/",
}
}
回答 1
Stack Overflow用户
发布于 2016-07-01 02:38:36
除非你真的想要分别发布、版本和管理每个分子、原子和有机体，否则就没有必要在每个分子中放置一个package.json，并手动管理它们。
将您的package.json保留在项目的根，然后使用导入来指定依赖项，而不是devDependencies (另外，为什么一定要在生产中使用devDependencies？)
// first-atom.js
export default FirstAtom;
// second-atom.js
export default SecondAtom;
// first-molecule.js
import FirstAtom from '../atoms/first-atom';
import SecondAtom from '../atoms/second-atom';
// ...
export default FirstMolecule;你可以继续这个依赖图，直到你的生物体。这样，每当您构建一个版本的应用程序，您需要的一切都将在一次编译。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38140850
复制相关文章
点击加载更多
腾讯云开发者
