new.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. 'use strict';
  2. console.log();
  3. process.on('exit', () => {
  4. console.log();
  5. });
  6. if (!process.argv[2]) {
  7. console.error('[组件名]必填 - Please enter new component name');
  8. process.exit(1);
  9. }
  10. const path = require('path');
  11. const fs = require('fs');
  12. const fileSave = require('file-save');
  13. const uppercamelcase = require('uppercamelcase');
  14. const componentname = process.argv[2];
  15. const chineseName = process.argv[3] || componentname;
  16. const ComponentName = uppercamelcase(componentname);
  17. const PackagePath = path.resolve(__dirname, '../../packages', componentname);
  18. const Files = [
  19. {
  20. filename: 'index.js',
  21. content: `import ${ComponentName} from './src/main';
  22. /* istanbul ignore next */
  23. ${ComponentName}.install = function(Vue) {
  24. Vue.component(${ComponentName}.name, ${ComponentName});
  25. };
  26. export default ${ComponentName};`
  27. },
  28. {
  29. filename: 'src/main.vue',
  30. content: `<template>
  31. <div class="el-${componentname}"></div>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'El${ComponentName}'
  36. };
  37. </script>`
  38. },
  39. {
  40. filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),
  41. content: `## ${ComponentName} ${chineseName}`
  42. },
  43. {
  44. filename: path.join('../../examples/docs/en-US', `${componentname}.md`),
  45. content: `## ${ComponentName}`
  46. },
  47. {
  48. filename: path.join('../../examples/docs/es', `${componentname}.md`),
  49. content: `## ${ComponentName}`
  50. },
  51. {
  52. filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),
  53. content: `## ${ComponentName}`
  54. },
  55. {
  56. filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
  57. content: `import { createTest, destroyVM } from '../util';
  58. import ${ComponentName} from 'packages/${componentname}';
  59. describe('${ComponentName}', () => {
  60. let vm;
  61. afterEach(() => {
  62. destroyVM(vm);
  63. });
  64. it('create', () => {
  65. vm = createTest(${ComponentName}, true);
  66. expect(vm.$el).to.exist;
  67. });
  68. });
  69. `
  70. },
  71. {
  72. filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),
  73. content: `@import "mixins/mixins";
  74. @import "common/var";
  75. @include b(${componentname}) {
  76. }`
  77. },
  78. {
  79. filename: path.join('../../types', `${componentname}.d.ts`),
  80. content: `import { ElementUIComponent } from './component'
  81. /** ${ComponentName} Component */
  82. export declare class El${ComponentName} extends ElementUIComponent {
  83. }`
  84. }
  85. ];
  86. // 添加到 components.json
  87. const componentsFile = require('../../components.json');
  88. if (componentsFile[componentname]) {
  89. console.error(`${componentname} 已存在.`);
  90. process.exit(1);
  91. }
  92. componentsFile[componentname] = `./packages/${componentname}/index.js`;
  93. fileSave(path.join(__dirname, '../../components.json'))
  94. .write(JSON.stringify(componentsFile, null, ' '), 'utf8')
  95. .end('\n');
  96. // 添加到 index.scss
  97. const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');
  98. const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;
  99. fileSave(sassPath)
  100. .write(sassImportText, 'utf8')
  101. .end('\n');
  102. // 添加到 element-ui.d.ts
  103. const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');
  104. let elementTsText = `${fs.readFileSync(elementTsPath)}
  105. /** ${ComponentName} Component */
  106. export class ${ComponentName} extends El${ComponentName} {}`;
  107. const index = elementTsText.indexOf('export') - 1;
  108. const importString = `import { El${ComponentName} } from './${componentname}'`;
  109. elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);
  110. fileSave(elementTsPath)
  111. .write(elementTsText, 'utf8')
  112. .end('\n');
  113. // 创建 package
  114. Files.forEach(file => {
  115. fileSave(path.join(PackagePath, file.filename))
  116. .write(file.content, 'utf8')
  117. .end('\n');
  118. });
  119. // 添加到 nav.config.json
  120. const navConfigFile = require('../../examples/nav.config.json');
  121. Object.keys(navConfigFile).forEach(lang => {
  122. let groups = navConfigFile[lang][4].groups;
  123. groups[groups.length - 1].list.push({
  124. path: `/${componentname}`,
  125. title: lang === 'zh-CN' && componentname !== chineseName
  126. ? `${ComponentName} ${chineseName}`
  127. : ComponentName
  128. });
  129. });
  130. fileSave(path.join(__dirname, '../../examples/nav.config.json'))
  131. .write(JSON.stringify(navConfigFile, null, ' '), 'utf8')
  132. .end('\n');
  133. console.log('DONE!');