zoukankan      html  css  js  c++  java
  • taro3.x: typeScript配置alias

    配置文件tsconfig.json的path属性:

    {
      "compilerOptions": {
        "target": "es2017",
        "module": "commonjs",
        "removeComments": false,
        "preserveConstEnums": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "allowSyntheticDefaultImports": true,
        "outDir": "lib",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "baseUrl": ".",
        "rootDir": ".",
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "allowJs": true,
        "resolveJsonModule": true,
        "typeRoots": [
          "node_modules/@types",
          "global.d.ts"
        ],
        "paths": {
            "@components/*": ["src/components/*"],
            "@hooks/*": ["src/hooks/*"],
            "@assets/*": ["src/assets/*"], // css, html中需要 `~@assets/*`
        }
      },
      "exclude": [
        "node_modules",
        "dist"
      ],
      "compileOnSave": false
    }

    配置文件:

    config/index.js的alias属性

    const path = require('path')
    
    const config = {
      projectName: 'mini',
      date: '2020-8-6',
      designWidth: 750,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2
      },
      sourceRoot: 'src',
      outputRoot: `dist/${process.env.TARO_ENV}`,
      plugins: [],
      defineConstants: {
      },
      copy: {
        patterns: [
        ],
        options: {
        }
      },
      framework: 'react',
      mini: {
        postcss: {
          pxtransform: {
            enable: true,
            config: {
    
            }
          },
          url: {
            enable: true,
            config: {
              limit: 1024 // 设定转换尺寸上限
            }
          },
          cssModules: {
            enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: 'module', // 转换模式,取值为 global/module
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      },
      h5: {
        publicPath: '/',
        staticDirectory: 'static',
        postcss: {
          autoprefixer: {
            enable: true,
            config: {
            }
          },
          cssModules: {
            enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: 'module', // 转换模式,取值为 global/module
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      },
      alias: {
        '@components': path.resolve(__dirname, '..', 'src/components'),
        '@hooks': path.resolve(__dirname, '..', 'src/hooks'),
       '@assets': path.resolve(__dirname, '..', 'src/assets'),
    } } module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod')) }
  • 相关阅读:
    redis的几种模式
    redis ,memcache的对比
    忍龙sigma 不升级武器.图书馆百人斩包爽无脑操作攻略
    浏览器刷新或者关闭事件监听 beforeunload pagehide
    Element-Ui实现分页table缓存勾中数据
    [转载]Localtunnel使您可以轻松地在本地开发计算机上共享Web服务,而不会弄乱DNS和防火墙设置。
    cmder 分成四屏
    P3709 大爷的字符串题(莫队+离散化)
    P3604 美好的每一天(莫队+前缀和)
    P4462 [CQOI2018]异或序列(莫队+前缀和)
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13578270.html
Copyright © 2011-2022 走看看