index.js 配置的 copy 部分文件还是没有原样拷贝

[onekr-billy]

问题描述
我的taro项目部分页面使用了小程序的原生页面，但是原生页面的 wxss文件被编译过了，我看到你们官方的demo， 需要通过 copy这个配置来拷贝， 但是我配置了发现dist目录下的文件还是被编译过了

复现步骤

1. 配置 /config/index.js 文件的copy配置
2. 重新启动 npm run dev:weapp 发现dist目录下的文件跟源文件不一致

const path = require('path')
// NOTE 在 sass 中通过别名（@ 或 ~）引用需要指定路径
const sassImporter = function(url) {
  if (url[0] === '~' && url[1] !== '/') {
    return {
      file: path.resolve(__dirname, '..', 'node_modules', url.substr(1))
    }
  }

  const reg = /^@styles\/(.*)/
  return {
    file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
  }

}
const config = {
  projectName: 'xx',
  date: '2019-5-16',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: {
    babel: {
      sourceMap: true,
      presets: [
        ['env', {
          modules: false
        }]
      ],
      plugins: [
        'transform-decorators-legacy',
        'transform-class-properties',
        'transform-object-rest-spread'
      ]
    },
    sass: {
      importer: sassImporter
    }
  },
  alias: {
    '@utils': path.resolve(__dirname, '..', 'src/utils'),
    '@styles': path.resolve(__dirname, '..', 'src/styles'),
    '@assets': path.resolve(__dirname, '..', 'src/assets'),
    '@actions': path.resolve(__dirname, '..', 'src/actions'),
    '@components': path.resolve(__dirname, '..', 'src/components')
  },
  defineConstants: {
    HOST: 'http://saas.xx.com',
    STATIC_HOST: 'http://static.xx.com'
  },
  // alias: {
  //   '@': path.resolve(__dirname, '..', 'src'),
  //   '@actions': path.resolve(__dirname, '..', 'src/actions'),
  //   '@assets': path.resolve(__dirname, '..', 'src/assets'),
  //   '@components': path.resolve(__dirname, '..', 'src/components'),
  //   '@constants': path.resolve(__dirname, '..', 'src/constants'),
  //   '@reducers': path.resolve(__dirname, '..', 'src/reducers'),
  //   '@styles': path.resolve(__dirname, '..', 'src/styles'),
  //   '@utils': path.resolve(__dirname, '..', 'src/utils')
  // },
  copy: {
    patterns: [
      { from: 'src/assets/', to: 'dist/assets/' },
      { from: 'src/pkg-live/push/', to: 'dist/pkg-live/push/' },
      { from: 'src/pkg-live/push/push-config/push-config.wxss', to: 'dist/pkg-live/push/push-config/push-config.wxss' },
      { from: 'src/pkg-live/play/', to: 'dist/pkg-live/play/' },
    ],
    options: {
    }
  },
  weapp: {
    compile: {
      //exclude: ['src/pkg-live/push/**']
    },
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: [
              'last 3 versions',
              'Android >= 4.1',
              'ios >= 8'
            ]
          }
        },
        pxtransform: {
          enable: true,
          config: {

          }
        },
        url: {
          enable: true,
          config: {
            limit: 10240 // 设定转换尺寸上限
          }
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['taro-ui', 'taro-f2'],
    output: {
      filename: 'js/[name].[hash].js',
      chunkFilename: 'js/[name].[chunkhash].js'
    },
    imageUrlLoaderOption: {
      limit: 5000,
      name: 'static/images/[name].[hash].[ext]'
    },
    miniCssExtractPluginOption: {
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[name].[chunkhash].css',
    },
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: [
              'last 3 versions',
              'Android >= 4.1',
              'ios >= 8'
            ]
          }
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
    },
    sassLoaderOption: {
      importer: sassImporter
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

期望行为
通过 copy 拷贝的文件 不要进行编译， 以及日志里明确输出拷贝的日志，方便排查问题

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

Taro CLI 1.2.26 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.15.1 - C:\nodejs\node.EXE
npm: 6.4.1 - C:\nodejs\npm.CMD

补充信息
copy 是在编译前还是编译后进行的？ 我认为应该先进行编译，然后再执行copy

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Garfield550]

我拷贝的文件没有经过编译

  copy: {
    patterns: [
      {
        // 拷贝 wxParser 的样式表
        from: 'src/Components/WxParser/wxParser/index.wxss',
        to: 'dist/weapp/Components/WxParser/wxParser/index.wxss',
      },
      {
        // 拷贝 wxParser 的小程序原生组件
        from: 'src/Components/WxParser/wxParser/index.wxml',
        to: 'dist/weapp/Components/WxParser/wxParser/index.wxml',
      },
    ],
    options: {},
  },

[onekr-billy]

我看了日志， 并且观察了 dist目录，
copy是开始编译的时候立即执行的把？ 执行完后才进行 编译 src里的文件，再次输出到 dist目录， 所以才会导致我提出的这个问题， 请问作者 这么做的目的是什么？ 我能否通过什么配置在执行完编译后再拷贝文件？

[onekr-billy]

发现部分代码会被转换， 我猜测可能是使用了 flex布局的，就会增加一些属性，例如以下这段代码

源代码：
.item { width:88vw; height:30px; padding-left: 6vw; margin-top: 10px; padding-bottom: 10px; display:flex; flex-flow: row; align-items:center; }
dist目录
.item { width:88vw; height:30rpx; padding-left: 6vw; margin-top: 10rpx; padding-bottom: 10rpx; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }

[Garfield550]

发现部分代码会被转换， 我猜测可能是使用了 flex布局的，就会增加一些属性，例如以下这段代码

源代码：
.item { width:88vw; height:30px; padding-left: 6vw; margin-top: 10px; padding-bottom: 10px; display:flex; flex-flow: row; align-items:center; }
dist目录
.item { width:88vw; height:30rpx; padding-left: 6vw; margin-top: 10rpx; padding-bottom: 10rpx; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }

Flex 的问题我在你的另一个 issue 里回复了，如果不想的话你可以使用 autoprefixer 选项给它关掉。

建议在这之前先了解下 postCSS 和 autoprefixer 两个前端常用工具。

#3128 (comment)

看了你的 GitHub 历史我认为你是一个偏向后端技术栈的开发者，如果可以的话是否能让身边的前端小伙伴给你解释下 postCSS 和 autoprefixer 的作用呢？

[onekr-billy]

@Garfield550 是的， 原因我大概知道了， 我了解了一下你说的这两个插件， 根本原因还是原文件写的不规范导致转换后的布局错乱， 我没有用之前他们的样式了， 重做了之前的页面

不过我其实在排查问题的时候关注的是， 为什么copy不是拷贝的源文件，而是拷贝编译后的文件， 并且我观察dist目录， 同一个文件会变化两次， 第一阶段，copy过去的源文件， 然后编译后把源文件替换掉了， 我是否可以通过参数进行控制这个步骤的细节？ 我既然使用了 copy配置说明我不想用编译后的文件

[Garfield550]

@Garfield550 是的， 原因我大概知道了， 我了解了一下你说的这两个插件， 根本原因还是原文件写的不规范导致转换后的布局错乱， 我没有用之前他们的样式了， 重做了之前的页面

不过我其实在排查问题的时候关注的是， 为什么copy不是拷贝的源文件，而是拷贝编译后的文件， 并且我观察dist目录， 同一个文件会变化两次， 第一阶段，copy过去的源文件， 然后编译后把源文件替换掉了， 我是否可以通过参数进行控制这个步骤的细节？ 我既然使用了 copy配置说明我不想用编译后的文件

Copy 的细度配置目前还没有，帮你 cc @luckyadam 老李

[crazcdll]

请问这个 copy 配置项的作用，可以用来 复制某个文件 到 dist 目录下吗？

比如我想复制 src/others/aaa.txt 到 dist/aaa.txt，这样写可以吗？

copy: {
    patterns: [
      { from: 'src/others/aaa.txt', to: 'dist/aaa.txt' }
    ],
    options: {
    }
  },

谢谢！

[taro-bot]

CC @luckyadam

[Chen-jj]

Taro 2、3 使用 webpack 进行编译，升级后再试试吧。