chore: script 代码优化

package.json

 {
   "name": "@nutui/nutui-react",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",
@@ -37,27 +37,26 @@
   ],
   "scripts": {
     "add": "node scripts/createComponentMode.js",
-    "generate:types": "tsc && npm run replace:types",
     "generate:file": "node scripts/generate-nutui.js",
-    "generate:loader-style": "node scripts/generate-loader-style.js",
-    "replace:scss": "node scripts/replace-scss.js",
-    "replace:types": "node scripts/replace-types.js",
     "generate:themes": "node scripts/generate-themes.js",
     "checked": "npm run generate:file && tsc",
     "dev": "npm run checked && vite --open --force",
-    "build:css": "npm run generate:themes && vite build --config vite.config.build.css.ts && npm run build:replace",
+    "replace:scss": "node scripts/replace-scss-alias.js",
+    "replace:types": "node scripts/replace-types-alias.js",
+    "build:types": "tsc && npm run replace:types",
+    "build:loader-style": "node scripts/generate-loader-style.js",
+    "build:component:css": "node scripts/build-component-css.js",
+    "build:css": "npm run generate:themes && vite build --config vite.config.build.css.ts && npm run build:replace ",
     "build:replace": "npm run replace:scss",
-    "build:esm": "npx rollup -c rollup.config.es.js",
-    "build": "npm run checked && vite build --config vite.config.build.ts && npm run build:esm && npm run build:css && npm run generate:types && npm run generate:loader-style",
+    "build:es": "npx rollup -c rollup.config.es.js",
+    "build": "npm run checked && vite build --config vite.config.build.ts && npm run build:es && npm run build:css && npm run build:loader-style && npm run build:types ",
     "build:site": "npm run checked && vite build --config vite.config.build.site.ts",
     "publish:beta": "npm publish --tag beta",
     "prepare": "husky install"
   },
   "lint-staged": {
     "*.md": "prettier --write",
-    "*.{ts,tsx,js,scss}": "prettier --write",
-    "*.js": "eslint --cache --fix",
-    "*.{js,css,md}": "prettier --write"
+    "*.{ts,tsx,js,vue,scss}": "prettier --write"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.5",

rollup.config.es.js

@@ -20,7 +20,13 @@ config.nav.map((item) => {
 export default {
   input: entries,
   external: (id, parent) =>
-    /^react/.test(id) || /^react\-dom/.test(id) || (/^\@\/packages\/\w+$/.test(id) && !!parent),
+    /^react/.test(id) ||
+    /^react\-dom/.test(id) ||
+    /^classnames/.test(id) ||
+    /^\@use-gesture/.test(id) ||
+    /^\@react-spring/.test(id) ||
+    /^\@bem-react/.test(id) ||
+    (/^\@\/packages\/\w+$/.test(id) && !!parent),
   output: {
     format: 'esm',
     dir: './dist/esm',

scripts/build-component-css.js

+const sass = require('sass')
+const glob = require('glob')
+const fsExtra = require('fs-extra')
+const fs = require('fs/promises')
+const path = require('path')
+const shelljs = require('shelljs')
+const componentScss = glob.sync('dist/packages/**/*.scss')
+
+componentScss.map(async (cs) => {
+  const filename = path.basename(cs).replace('.scss', '')
+  const dirname = path.dirname(cs)
+
+  if (dirname.indexOf(filename) === -1) return
+
+  const res = await fs.readFile(path.join(process.cwd(), cs))
+  fsExtra.outputFileSync(
+    path.join(process.cwd(), cs + '.1.scss'),
+    `@import "../../styles/variables";\n` + res.toString()
+  )
+  shelljs.exec(
+    `sass dist/packages/${filename}/${filename}.scss.1.scss dist/packages/${filename}/${filename}.css`
+  )
+  fsExtra.removeSync(path.join(process.cwd(), `dist/packages/${filename}/${filename}.scss.1.scss`))
+})

scripts/createComponentMode.js

 // 创建模板
-
 const inquirer = require('inquirer')
-// import {  ROOT_PACKAGE_PATH } from '../util/dic';
-
 const path = require('path')
 const fs = require('fs')
 const config = require('../src/config.json')
@@ -119,38 +116,10 @@ function createIndexJs() {
   if (!fs.existsSync(destPath)) {
     fs.mkdirSync(destPath)
   }
-  // copy(path.join(__dirname, './__template__/**.*'), destPath, function (err: any, file: any) {
-  // 	if (err) {
-  // 		console.log('拷贝__template__目录失败！');
-  // 	}
-  // 	createNew();
-  // });
 
   if (newCpt.type == 'method') return
   return new Promise((resolve, reject) => {
-    //         let content = `import ${newCpt.name} from './src/${nameLc}.vue';
-    // ${newCpt.name}.install = function(Vue) {
-    //   Vue.${newCpt.type}(${newCpt.name}.name, ${newCpt.name});
-    // };
-    // export default ${newCpt.name}`;
-    //         let content2 = `${newCpt.name}.install = function(Vue) {
-    // Vue.${newCpt.type}(${newCpt.name}.name, ${newCpt.name});
-    // };
-    // export default ${newCpt.name}`;
-
-    // const dirPath = path.join(__dirname, `../src/packages/${nameLc}/`);
-
-    // const filePath = path.join(dirPath, `index.js`);
-    // if (!fs.existsSync(dirPath)) {
-    // 	fs.mkdirSync(filePath);
-    // }
-    // if (newCpt.type == 'filter' || newCpt.type == 'directive'){
-    //     content = content2;
-    // }
-    // fs.writeFile(filePath,  content, (err) => {
-    //     if (err) throw err;
     resolve(`生成index.js文件成功`)
-    // });
   })
 }
 

scripts/generate-loader-style.js

 const config = require('../src/config.json')
 const path = require('path')
 const fs = require('fs-extra')
-let importScssStr = `\n`
 config.nav.map((item) => {
   item.packages.forEach((element) => {
     let { name, show, exportEmpty } = element
     const nameLowerCase = name.toLowerCase()
     const file = path.resolve(process.cwd(), `dist/esm/${name}/style/index.js`)
+    const cssFile = path.resolve(process.cwd(), `dist/esm/${name}/style/css.js`)
     if (show || exportEmpty) {
-      importScssStr = `import '../../../packages/${nameLowerCase}/${nameLowerCase}.scss'`
-      fs.outputFileSync(file, importScssStr)
+      fs.outputFileSync(file, `require('../../../packages/${nameLowerCase}/${nameLowerCase}.scss')`)
+      fs.outputFileSync(
+        cssFile,
+        `require('../../../packages/${nameLowerCase}/${nameLowerCase}.css')`
+      )
     }
   })
 })

scripts/generate-themes.js

@@ -2,10 +2,9 @@ const config = require('../src/config.json')
 const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob')
-const componetsScss = glob.sync('./src/packages/**/*.scss')
+const componentsScss = glob.sync('./src/packages/**/*.scss')
 let tasks = []
-componetsScss.map((cs) => {
-  console.log(cs)
+componentsScss.map((cs) => {
   if (cs.indexOf('demo.scss') > -1) return
   tasks.push(
     fs
@@ -23,18 +22,6 @@ config.nav.map((item) => {
   item.packages.forEach((element) => {
     let folderName = element.name.toLowerCase()
     fileStr += `@import '../../packages/${folderName}/${folderName}.scss';\n`
-
-    // tasks.push(
-    //   fs
-    //     .copy(
-    //       path.resolve(__dirname, `../src/packages/${folderName}/${folderName}.scss`),
-    //       path.resolve(__dirname, `../dist/packages/${folderName}/${folderName}.scss`)
-    //     )
-    //     .then((success) => {
-    //       fileStr += `@import '@/packages/${folderName}/${folderName}.scss';\n`
-    //     })
-    //     .catch((error) => {})
-    // )
   })
 })
 

src/packages/dialog/dialog.scss

 @import '../button/button.scss';
+@import '../../styles/mixins/index';
+
 .nut-dialog {
   display: flex;
   flex-direction: column;
@@ -16,6 +18,7 @@
     color: $dialog-header-color;
     @include oneline-ellipsis();
   }
+
   &__content {
     width: 100%;
     overflow: auto;
@@ -29,6 +32,7 @@
     word-break: break-all;
     white-space: pre-wrap;
   }
+
   &__footer {
     display: flex;
     align-items: center;
@@ -41,9 +45,11 @@
       .nut-button {
         min-width: 100%;
         margin: 0;
+
         &.nut-dialog__footer-cancel {
           border: 0;
         }
+
         &.nut-dialog__footer-ok {
           margin-top: $dialog-vertical-footer-ok-margin-top;
         }
@@ -57,6 +63,7 @@
     &-cancel.nut-dialog__footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
     }
+
     &-ok {
       max-width: $dialog-footer-ok-max-width;
     }

src/packages/tabbaritem/index.ts

-import { TabbarItem } from './tabbarItem'
+import { TabbarItem } from './tabbaritem'
 export default TabbarItem

src/styles/variables.scss

@@ -346,6 +346,6 @@ $dialog-vertical-footer-ok-margin-top: 10px !default;
 $dialog-footer-button-min-width: 100px !default;
 $dialog-footer-cancel-margin-right: 20px !default;
 $dialog-footer-ok-max-width: 128px !default;
-
-@import './mixins/index';
-@import './animation/index';
+// 在组件中import
+//@import './mixins/index';
+//@import './animation/index';

tsconfig.json

@@ -3,7 +3,9 @@
     "baseUrl": ".",
     "rootDir": ".",
     "target": "ESNext",
-    "types": ["vite/client"],
+    "types": [
+      "vite/client"
+    ],
     "allowJs": false,
     "declaration": true,
     "declarationDir": "./dist/esm/types",
@@ -18,11 +20,24 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react",
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
-  "exclude": ["./node_modules/*", "src/sites/*", "src/**/demo.tsx"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "./node_modules/*",
+    "src/sites/*",
+    "src/**/demo.tsx"
+  ]
 }

vite.config.build.css.ts

 import { defineConfig } from 'vite'
 import reactRefresh from '@vitejs/plugin-react-refresh'
-import path from 'path'
-import config from './package.json'
+
+const path = require('path')
+const config = require('./package.json')
 const atImport = require('postcss-import')
 
 const banner = `/*!

vite.config.build.site.ts

 import { defineConfig } from 'vite'
-import config from './package.json'
 import reactRefresh from '@vitejs/plugin-react-refresh'
-import path from 'path'
+
+const path = require('path')
+const config = require('./package.json')
 const atImport = require('postcss-import')
 const resolve = path.resolve
 

vite.config.build.ts

 import { defineConfig } from 'vite'
 import reactRefresh from '@vitejs/plugin-react-refresh'
-import path from 'path'
-import config from './package.json'
+
+const path = require('path')
+const config = require('./package.json')
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}

vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'vite'
 import reactRefresh from '@vitejs/plugin-react-refresh'
 
 const atImport = require('postcss-import')
-import path from 'path'
+const path = require('path')
 
 const resolve = path.resolve
 // https://vitejs.dev/config/