How to use @dcloudio/uni-cli-shared - 10 common examples

compiler.hooks.invalid.tap('webpack-uni-mp-invalid', (fileName, changeTime) => {
      if (
        fileName &&
        typeof fileName === 'string'
      ) { // 重新解析 entry
        const basename = path.basename(fileName)
        const deps = process.UNI_PAGES_DEPS || new Set()
        if (
          basename === 'pages.json' ||
          basename === pagesJsonJsFileName ||
          deps.has(normalizePath(fileName))
        ) {
          try {
            parseEntry()
          } catch (e) {
            console.error(e)
          }
        }
      }
    })
  }

// Vue
    webpackConfig.module
      .rule('vue')
      .test([/\.vue$/, /\.nvue$/])
      .use('vue-loader')
      .tap(options => Object.assign(options, {
        compiler: getPlatformCompiler(),
        compilerOptions: require('./compiler-options'),
        cacheDirectory: false,
        cacheIdentifier: false
      }))
      .end()
      .use('uniapp-custom-block-loader')
      .loader(require.resolve('@dcloudio/vue-cli-plugin-uni/packages/webpack-custom-block-loader'))
      .options({
        compiler: getPlatformCompiler()
      })
      .end()
      .use('uniapp-scoped')
      .loader(resolve('packages/webpack-scoped-loader'))
      .end()
      .uses
      .delete('cache-loader')

    if (process.env.NODE_ENV === 'production') {
      const module = webpackConfig.module
      // TODO 临时 hack calc:false 看看 vue cli 后续是否开放 cssnano 的配置
      const cssnanoOptions = {
        sourceMap: false,
        plugins: [require('cssnano')({
          preset: ['default', getPlatformCssnano()]
        })]

webpackConfig.module
    .rule('vue')
    .test([/\.vue$/, /\.nvue$/])
    .use('vue-loader')
    .tap(options => Object.assign(options, {
      compiler: getPlatformCompiler(),
      compilerOptions: Object.assign({
        isUnaryTag,
        preserveWhitespace: false
      }, compilerOptions)
    }, cacheConfig))
    .end()
    .use('uniapp-custom-block-loader')
    .loader(require.resolve('@dcloudio/vue-cli-plugin-uni/packages/webpack-custom-block-loader'))
    .options({
      compiler: getPlatformCompiler()
    })

  // h5 框架需要使用 scoped 样式,其他平台编译时识别是否 nvue 文件且注入 flex 相关样式
  if (process.env.UNI_PLATFORM === 'h5') {
    webpackConfig.module
      .rule('vue')
      .use('uniapp-h5-style-scoped')
      .loader(require.resolve('@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader'))
  } else {
    webpackConfig.module
      .rule('vue')
      .use('uniapp-nvue-style-loader')
      .loader(require.resolve('@dcloudio/webpack-uni-mp-loader/lib/style.js'))
  }
  // 是否启用 cache
  if (process.env.UNI_USING_CACHE) {

Object.keys(process.UNI_SUBPACKAGES).forEach(root => {
    const subPackageVendorPath = normalizePath(path.join(root, 'common/vendor.js'))
    if (assetsKeys.indexOf(subPackageVendorPath) !== -1) {
      // TODO 理论上仅需在分包第一个 js 中添加 require common vendor，但目前不同平台可能顺序不一致，
      // 故 每个分包里的 js 里均添加一次 require
      assetsKeys.forEach(name => {
        if (
          path.extname(name) === '.js' &&
          name.indexOf(root) === 0 &&
          name !== subPackageVendorPath
        ) {
          const source = `require('${normalizePath(path.relative(path.dirname(name), subPackageVendorPath))}');` +
            compilation.assets[name].source()

          compilation.assets[name] = {
            size () {
              return Buffer.byteLength(source, 'utf8')
            },

function baseTest (module) {
    if (module.type === 'css/mini-extract') {
      return false
    }
    if (module.resource) {
      const resource = normalizePath(module.resource)
      if (
        resource.indexOf('.vue') !== -1 ||
        resource.indexOf('.nvue') !== -1 ||
        resource.indexOf(mainPath) === 0 // main.js
      ) {
        return false
      }
    }
    return true
  }
  // TODO 独立分包

module.exports = function(content, map) {
  this.cacheable && this.cacheable()
  const resourcePath = removeExt(
    normalizePath(path.relative(process.env.UNI_INPUT_DIR, this.resourcePath))
  )
  content = content + getUsingComponentsCode(resourcePath)
  // TODO 自动导入 vue 组件(h5,小程序,app[vue,nvue])
  // 1. 需要 template-loader 解析出所有自定义组件()
  // 2. 根据自定义组件信息生成引用代码
  // 3. node-modules中的组件不提供自动导入
  return content
}

module.exports = function (content) {
  if (process.env.UNI_USING_COMPONENTS) {
    return require('./template-new').call(this, content)
  }
  this.cacheable && this.cacheable()

  const realResourcePath = path.relative(process.env.UNI_INPUT_DIR, this.resourcePath)

  if (process.env.UNI_USING_COMPONENTS) {
    // 向 uni-template-compier 传递 emitFile
    const vueLoaderOptions = this.loaders[0]
    if (vueLoaderOptions.ident === 'vue-loader-options') {
      Object.assign(vueLoaderOptions.options.compilerOptions, {
        resourcePath: removeExt(realResourcePath) + templateExt,
        emitFile: this.emitFile
      })
    } else {
      throw new Error('vue-loader-options parse error')
    }
  } else {
    if (!content.trim()) {
      content = ''
    }

    cacheTemplate(realResourcePath, content)

    const query = qs.parse(this.resourceQuery.slice(1))

    const {
      id

Object.keys(assets).forEach(name => {
      if (components.has(name.replace('.js', ''))) {
        const chunkName = name.replace('.js', '-create-component')

        let moduleId = ''
        if (name.indexOf('node-modules') === 0) {
          const modulePath = removeExt(restoreNodeModules(name))
          const resource = normalizePath(path.resolve(process.env.UNI_INPUT_DIR, '..', modulePath))
          const altResource = normalizePath(path.resolve(process.env.UNI_INPUT_DIR, modulePath))
          moduleId = findComponentModuleId(modules, concatenatedModules, resource, altResource)
        } else {
          const resource = removeExt(path.resolve(process.env.UNI_INPUT_DIR, name))
          moduleId = findComponentModuleId(modules, concatenatedModules, resource)
        }

        const origSource = assets[name].source()
        if (origSource.length !== `Component({})`.length) { // 不是空组件
          const globalVar = process.env.UNI_PLATFORM === 'mp-alipay' ? 'my' : 'global'
          // 主要是为了解决支付宝旧版本， Component 方法只在组件 js 里有，需要挂在 my.defineComponent
          let beforeCode = ''
          if (process.env.UNI_PLATFORM === 'mp-alipay') {
            beforeCode = ';my.defineComponent || (my.defineComponent = Component);'
          }

Object.keys(assets).forEach(name => {
      if (components.has(name.replace('.js', ''))) {
        const chunkName = name.replace('.js', '-create-component')

        let moduleId = ''
        if (name.indexOf('node-modules') === 0) {
          const modulePath = removeExt(restoreNodeModules(name))
          const resource = normalizePath(path.resolve(process.env.UNI_INPUT_DIR, '..', modulePath))
          const altResource = normalizePath(path.resolve(process.env.UNI_INPUT_DIR, modulePath))
          moduleId = findComponentModuleId(modules, concatenatedModules, resource, altResource)
        } else {
          const resource = removeExt(path.resolve(process.env.UNI_INPUT_DIR, name))
          moduleId = findComponentModuleId(modules, concatenatedModules, resource)
        }

        const origSource = assets[name].source()
        if (origSource.length !== `Component({})`.length) { // 不是空组件
          const globalVar = process.env.UNI_PLATFORM === 'mp-alipay' ? 'my' : 'global'
          // 主要是为了解决支付宝旧版本， Component 方法只在组件 js 里有，需要挂在 my.defineComponent
          let beforeCode = ''
          if (process.env.UNI_PLATFORM === 'mp-alipay') {
            beforeCode = ';my.defineComponent || (my.defineComponent = Component);'
          }
          const source = beforeCode + origSource +
            `
;(${globalVar}["webpackJsonp"] = ${globalVar}["webpackJsonp"] || []).push([
    '${chunkName}',
    {

module.exports = function (content) {
  this.cacheable && this.cacheable()

  const vueLoaderOptions = this.loaders[0]
  if (vueLoaderOptions.ident === 'vue-loader-options') {
    const globalUsingComponents = getGlobalUsingComponents()
    const realResourcePath = path.relative(process.env.UNI_INPUT_DIR, this.resourcePath)
    const resourcePath = normalizeNodeModules(removeExt(realResourcePath) + templateExt)
    const wxComponents = getWXComponents(resourcePath.replace(path.extname(resourcePath), ''))

    const params = loaderUtils.parseQuery(this.resourceQuery)
    /* eslint-disable no-mixed-operators */
    const filterModules = JSON.parse(params && params['filter-modules'] || '{}')
    Object.assign(vueLoaderOptions.options.compilerOptions, {
      mp: {
        platform: process.env.UNI_PLATFORM
      },
      filterModules,
      filterTagName,
      resourcePath,
      emitFile: this.emitFile,
      wxComponents,
      getJsonFile,
      getShadowTemplate,