nsbp-cli 0.1.0

package/templates/basic/src/styled/photo.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 20px;
+
+  .demo4 {
+    display: flex;
+    align-items: center;
+    height: 700px;
+    position: relative;
+
+    .demo4-inner {
+      overflow: hidden;
+      position: relative;
+      margin: auto;
+
+      .demo4-photo {
+        position: absolute;
+        background-color: lightgray;
+      }
+    }
+  }
+`
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 20px;
+  word-wrap: break-word; 
+  word-break: break-all; 
+  overflow: hidden;
+  padding-bottom: 10px;
+
+  a {
+    padding-right: 10px;
+  }
+`

package/templates/basic/src/styled/test.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 20px;
+
+  p {
+    color: green;
+  }
+`

package/templates/basic/src/utils/clientConfig.ts

@@ -0,0 +1,2 @@
+// 客户端专用配置文件
+export const useCurrentFlag = true // 是否使用当前目录环境

package/templates/basic/src/utils/config.ts

@@ -0,0 +1,7 @@
+export const useCurrentFlag = true // 是否使用当前目录环境
+
+export const outPhotoDic = 'Photos'
+
+export const outPhotoSep = '\\'
+
+export const outPhotoDicPath = `D:${outPhotoSep}${outPhotoDic}`

package/templates/basic/src/utils/fetch.ts

@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+let prefix = 'http://localhost:3001'
+
+export const doGet = (action:any) => {
+  return new Promise((resolve, reject) => {
+
+    if(typeof window !== "undefined"){
+      prefix = window.location.origin
+    }
+
+    let url = action
+    if (action.indexOf('http') === -1) {
+      if (action.substring(0, 1) !== '/') {
+        url = prefix + '/' + action
+      } else {
+        url = prefix + action
+      }
+    }
+
+    axios
+      .get(url)
+      .then(resolve)
+      .catch(reject)
+  })
+}

package/templates/basic/src/utils/index.ts

@@ -0,0 +1,45 @@
+export const getLocationParams = (param: any) => {
+  let result = ''
+  if (param !== '') {
+    const href = window?.location?.href
+    if (href && href.indexOf('?') !== -1) {
+      const query = href.split('?')[1]
+      const queryArr = query.split('&')
+
+      queryArr.forEach((item) => {
+        const itemArr = item.split('=')
+
+        if (param.toLowerCase() === itemArr[0].toLowerCase()) {
+          result = itemArr[1]
+          return false
+        }
+      })
+    }
+  }
+  return result
+}
+
+export const isSEO = () => {
+  if (typeof window !== 'undefined') {
+    let seo: any = getLocationParams('seo')
+    if (seo !== '') {
+      seo = parseInt(seo, 10)
+    }
+    return seo
+  }
+  return 0
+}
+
+export const handleLink = (link: string) => {
+  let result = link
+
+  if (isSEO()) {
+    if (link.indexOf('?') !== -1) {
+      result += '&'
+    } else {
+      result += '?'
+    }
+    result += 'seo=1'
+  }
+  return result
+}

package/templates/basic/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "lib": ["es5", "es6", "dom"], /* Specify library files to be included in the compilation. */  "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "removeComments": false, /* Do not emit comments to output. @loadable/components 必须置为 false */
+    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "sourceMap": true, /* Generates corresponding '.map' file. */
+    "outDir": "./build/", /* Redirect output structure to the directory. */
+    "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
+    "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "preserveConstEnums": true
+  },
+  "include":[ 
+    "./src/**/*",
+    "./src/externals/*.d.ts"
+  ]
+}

package/templates/basic/webpack.base.js

@@ -0,0 +1,262 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const { version } = require('./package.json')
+const LoadablePlugin = require('@loadable/webpack-plugin')
+const { createLoadableComponentsTransformer } = require('typescript-loadable-components-plugin')
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+
+// const createStyledComponentsTransformer =
+//   require('typescript-plugin-styled-components').default
+// const styledComponentsTransformer = createStyledComponentsTransformer()
+
+module.exports = ({ mode, entry, server, init }) => {
+  const config = {
+    mode,
+    entry,
+    devtool: 'source-map',
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  '@babel/preset-react',
+                  [
+                    '@babel/preset-env',
+                    {
+                      targets: {
+                        browsers: ['last 2 versions'] //对主流浏览器最近两个版本进行兼容
+                      }
+                    }
+                  ]
+                ],
+                plugins: [
+                  ['@babel/plugin-transform-class-properties'],
+                  ['@babel/plugin-transform-optional-chaining'],
+                  ["@babel/plugin-syntax-dynamic-import"],
+                  ['babel-plugin-styled-components'],
+                  ["@loadable/babel-plugin"]
+                ]
+              }
+            },
+            {
+              loader: 'ts-loader',
+              options: {
+                logInfoToStdOut: true,
+                logLevel: 'info',
+                transpileOnly: true,
+                configFile: path.resolve(__dirname, './tsconfig.json'),
+                getCustomTransformers: (program) => {
+                  // console.log('getCustomTransformers', program)
+
+                  return {
+                    before: [
+                      //createLoadableComponentsTransformer(program, {}),
+                      // styledComponentsTransformer,
+                      createLoadableComponentsTransformer(program, {
+                        setComponentId: true,
+                        setDisplayName: true,
+                        minify: true,
+                      }),
+                      //loadableTransformer
+                    ]
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /\.less$/,
+          use: [
+            mode === 'production' || server
+              ? MiniCssExtractPlugin.loader
+              : 'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+            'postcss-loader',
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                }
+              }
+            },
+          ]
+        },
+        {
+          test: /\.s(a|c)ss$/,
+          use: [
+            mode === 'production' || server
+              ? MiniCssExtractPlugin.loader
+              : 'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+            'postcss-loader',
+            'sass-loader'
+          ]
+        },
+        {
+          test: /\.css$/,
+          use: [
+            mode === 'production' || server
+              ? MiniCssExtractPlugin.loader
+              : 'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+            'postcss-loader'
+          ]
+        },
+        {
+          test: /\.(png|svg|jp?g|webp|gif)$/i,
+          type: 'asset/resource'
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'fonts/[name][ext]'
+          }
+        }
+      ]
+    },
+    plugins: [
+      new LoadablePlugin({
+        writeToDisk: true
+      })
+    ],
+    optimization: {
+      minimize: mode === 'production' || server ? true : false,
+      minimizer: [`...`, new CssMinimizerPlugin()]
+    }
+  }
+
+  if(init){
+    config.cache = false
+  } else {
+    config.cache = {
+      type: 'filesystem',
+      cacheDirectory: path.resolve(__dirname, '.temp_cache'),
+      // type: 'memory',
+      // cacheUnaffected: true,
+    }
+  }
+
+  if(mode === 'development' && !server){
+    config.plugins.push(
+      new BrowserSyncPlugin(
+        {
+          host: 'localhost',
+          port: 3000,
+          proxy: 'http://localhost:3001/'
+        }
+      )
+    )
+  }
+
+  if(mode === 'production' || server){
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: `css/[name].${version}.css`
+      })
+    )
+  }
+
+  if (!server) {
+    if (mode === 'development') {
+      config.entry['vendor'] = ['react', 'react-dom']
+    } else if (mode === 'production') {
+      config.optimization.minimizer.push(
+        new TerserPlugin({
+          terserOptions: {
+            compress: {
+              drop_debugger: true,
+              //drop_console: true,
+              pure_funcs: ['console.log']
+            }
+          }
+        })
+      )
+
+      config.optimization['splitChunks'] = {
+        chunks: 'all',
+        minSize: 20000,
+        minRemainingSize: 0,
+        minChunks: 1,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        enforceSizeThreshold: 50000,
+        name: false,
+        cacheGroups: {
+          framework: {
+            // 将react和react-dom打入framework当中
+            name: 'framework',
+            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/, //匹配库当中的react和react-dom
+            priority: 40, //权重为40 最大权重
+            reuseExistingChunk: true
+          },
+          lib: {
+            test: (module) => {
+              // 匹配包大于160000的
+              if (module.size() > 20000) {
+                console.log('test_module', module.identifier(), module.size())
+              }
+              return module.size() > 20000
+            },
+            name(module) {
+              //名字就是包当中的名字
+              return (
+                /[\\/]node_modules[\\/](.*)/.exec(module.identifier()) &&
+                /[\\/]node_modules[\\/](.*)/.exec(module.identifier()).length &&
+                /[\\/]node_modules[\\/](.*)/.exec(module.identifier())[1].replace(/\/|\\/g, '_')
+              )
+            },
+            minChunks: 1, //最小共用次数为1时就使用
+            priority: 30, //权重为30
+            reuseExistingChunk: true
+          },
+          vendor: {
+            name: 'vendor',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 20,
+            reuseExistingChunk: true
+          },
+          default: {
+            name: 'default',
+            minChunks: 2,
+            priority: 10,
+            reuseExistingChunk: true
+          }
+        }
+      }
+
+      config.optimization['runtimeChunk'] = {
+        name: 'runtime'
+      }
+    }
+  }
+
+  return config
+}

package/templates/basic/webpack.client.js

@@ -0,0 +1,26 @@
+const path = require('path') //node的path模块
+const { merge } = require('webpack-merge')
+const config = require('./webpack.base.js')
+const { version } = require('./package.json')
+
+const server = false
+
+const entry = {
+  client: ['./src/client/index.tsx']
+}
+
+const clientConfig = {
+  output: {
+    //打包出口
+    path: path.resolve(__dirname, 'public'),
+    filename: ({ chunk }) => {
+      const { name } = chunk
+      // console.log('name', name)
+      return `js/[name].${version}.bundle.js`
+    }
+  }
+}
+
+module.exports = (_, { mode }) => {
+  return merge(config({ mode, entry, server }), clientConfig)
+}

package/templates/basic/webpack.server.js

@@ -0,0 +1,33 @@
+const path = require('path') //node的path模块
+const nodeExternals = require('webpack-node-externals')
+const { merge } = require('webpack-merge')
+const config = require('./webpack.base.js')
+const { version } = require('./package.json')
+
+const init = process.env.INIT || 0
+const server = true
+
+console.log('init', init)
+
+const entry = {
+  server: ['./src/server/index.ts']
+}
+
+const serverConfig = {
+  target: 'node',
+  output: {
+    //打包出口
+    filename: `bundle.${version}.js`, //打包后的文件名
+    path: path.resolve(__dirname, 'build'), //存放到根目录的build文件夹
+    clean: true,
+    libraryTarget: 'commonjs2'
+  },
+  externals: [
+    '@loadable/component', 
+    nodeExternals()
+  ] //保持node中require的引用方式
+}
+
+module.exports = (_, { mode }) => {
+  return merge(config({ mode, entry, server, init }), serverConfig)
+}