feat: 支持 public 目录 (#1016)

docs/guide/advanced/hybrid.md

@@ -14,20 +14,6 @@ module.exports = {
 };
 ```
 
-配置完页面后，将原生的代码复制到对应的 `output` 目录，保持和 app.config.js 中配置的目录一致。
+将原生页面放置到根目录下的 public 目录中。public 目录中的文件会被复制到 dist 目录中。
 
-```js
-// remax.config.js
-const CopyPlugin = require('copy-webpack-plugin');
-
-module.exports = {
- configWebpack({ config }) {
- config.plugin('copy').use(CopyPlugin, [
- [
- // 表示将 native 目录整个输出到 output 目录下
- { from: '/path/to/native', to: './' },
- ],
- ]);
- },
-};
-```
+例如：`public/pages/index/index.js` 会被复制到 `dist/pages/index/index.js`

docs/guide/basic/public.md

@@ -0,0 +1,41 @@
+---
+title: public 目录
+order: 30
+---
+
+在项目根目录下创建 public 目录，public 目录下的所有文件会被自动复制到 dist 目录下。
+
+你可以将 `原生页面`, `tabBar 中配置的图片` 等等全局资源放在这个目录下。
+
+例如，当你配置了 tabBar，并指定了 icon 路径：
+
+```js
+// app.config.js
+module.exports = {
+ tabBar: {
+ list: [
+ {
+ pagePath: 'pages/index/index',
+ iconPath: '/images/icon.png',
+ text: '首页',
+ },
+ {
+ pagePath: 'pages/logs/logs',
+ text: '日志',
+ },
+ ],
+ },
+};
+```
+
+则你需要将 icon.png 放入 `public/images` 目录下即可。
+
+同样的你也可以在代码中直接指定全局静态资源：
+
+```js
+import { Image } from 'remax/wechat';
+
+export default () => {
+ return <Image src="/images/icon.png" />;
+};
+```

docs/guide/framework/style.md

@@ -78,27 +78,15 @@ css 中图片引用问题
 
 [遵循 css-loader 的规则](https://github.com/webpack-contrib/css-loader#url)
 
-1. `/path/to/image.png` 绝对路径表示对应输出目录中的 `/path/to` 路径位置，归类为 global assets，需要开发者自己 copy 文件到输出目录中对应的位置。
+1. `/path/to/image.png` 绝对路径表示对应输出目录中的 `/path/to` 路径位置，归类为 global assets，需要放置在 public 目录下。
 
 2. `~@/assets/image.png` `~` 开头表示引入的是 module，可以是 src 下的图片， webpack 可以 resolve。
 
 3. `../../assets/image.png` 相对路径也会被识别为 module，webpack 会处理。
 
-global assets 配置 copy 的参考
+对于情况 1， 中的图片，可以放在项目根目录中的 public 目录中。public 目录中的文件会被复制到 dist 目录中。
 
-```js
-// remax.config.js
-const CopyPlugin = require('copy-webpack-plugin');
-
-module.exports = {
- configWebpack({ config }) {
- // copy-webpack-plugin v5.x
- config.plugin('copy').use(CopyPlugin, [[{ from: 'src/path/to/assets', to: 'path/to/assets' }]]);
- // copy-webpack-plugin v6.0.0 入参修改了
- config.plugin('copy').use(CopyPlugin, [{ patterns: [{ from: 'src/path/to/assets', to: 'path/to/assets' }] }]);
- },
-};
-```
+例如：`public/path/to/image.png` 会被复制到 `dist/path/to/image.png`
 
 ## 样式补全
 

docs/guide/quick-start.md

@@ -51,6 +51,7 @@ my-app/
 ┳ package.json
 ┣ dist/
 ┣ node_modules/
+┣ public/
 ┣ src/
 ┗━┓ app.js
  ┣ app.css
@@ -65,6 +66,8 @@ my-app/
 
 `dist` 为编译后的文件目录。
 
+`public` 为全局静态资源目录，具体可参考[public 目录](/basic/public)。
+
 `src` 为源文件目录。
 
 `app.js` 入口文件，具体可参考 [指南 - 框架](/guide/framework)。

docs/guide/v2-migration.md

@@ -171,25 +171,15 @@ import './index.css';
 
 与 1.0 不同，2.0 中我们将遵循 [css-loader](https://github.com/webpack-contrib/css-loader#url) 的规则：
 
-1. `/path/to/image.png`， 绝对路径表示对应输出目录中的 `/path/to` 路径位置，归类为 global assets，需要开发者自己 copy 文件到输出目录中对应的位置。
+1. `/path/to/image.png`， 绝对路径表示对应输出目录中的 `/path/to` 路径位置，归类为 global assets，可以放置在 public 目录下。
 
 2. `~@/assets/image.png`， `~` 开头表示引入的是 module，可以是 src 下的图片， webpack 可以 resolve。
 
 3. `../../assets/image.png`， 相对路径也会被识别为 module，webpack 会处理。
 
-配置 copy 行为的方式：
+对于情况 1， 中的图片，可以放在项目根目录中的 public 目录中。public 目录中的文件会被复制到 dist 目录中。
 
-```js
-// remax.config.js
-const CopyPlugin = require('copy-webpack-plugin');
-
-module.exports = {
- configWebpack({ config }) {
- // 详细配置参考 copy-webpack-plugin
- config.plugin('copy').use(CopyPlugin, [[{ from: 'src/assets', to: 'assets' }]]);
- },
-};
-```
+例如：`public/path/to/image.png` 会被复制到 `dist/path/to/image.png`
 
 ### tabBar 中配置的本地图片
 

packages/remax-cli/package.json

@@ -43,6 +43,7 @@
  "babel-preset-remax": "2.2.0",
  "chokidar": "^3.4.0",
  "clean-webpack-plugin": "^3.0.0",
+ "copy-webpack-plugin": "^5.1.1",
  "css-loader": "^3.4.2",
  "detect-port": "^1.3.0",
  "dotenv": "^8.2.0",
@@ -102,7 +103,6 @@
  "@types/yargs": "^15.0.0",
  "address": "^1.1.2",
  "babel-plugin-loop-optimizer": "^1.4.1",
- "copy-webpack-plugin": "^5.1.1",
  "eol": "^0.9.1",
  "fs-readdir-recursive": "^1.1.0",
  "jest": "^26.0.1",

packages/remax-cli/src/build/webpack/config.mini.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 import Config from 'webpack-chain';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import WebpackBar from 'webpackbar';
 import { Options, Platform } from '@remax/types';
@@ -187,8 +188,14 @@ export default function webpackConfig(api: API, options: Options, target: Platfo
  });
  config.plugin('webpack-virtual-modules').use(virtualModules);
 
- config.plugin('webpackbar').use(WebpackBar, [{ name: target }]);
+ const publicDirPath = path.join(options.cwd, 'public');
+ if (fs.existsSync(publicDirPath)) {
+ config
+ .plugin('webpack-copy-plugin')
+ .use(CopyPlugin, [[{ from: publicDirPath, to: path.join(options.cwd, options.output) }]]);
+ }
 
+ config.plugin('webpackbar').use(WebpackBar, [{ name: target }]);
  config.plugin('mini-css-extract-plugin').use(MiniCssExtractPlugin, [{ filename: `[name]${meta.style}` }]);
  config.plugin('remax-optimize-entries-plugin').use(RemaxPlugins.OptimizeEntries, [meta]);
  config.plugin('remax-native-files-plugin').use(RemaxPlugins.NativeFiles, [options, api]);

packages/remax-cli/src/build/webpack/config.web.ts

@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import * as webpack from 'webpack';
 import Config from 'webpack-chain';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WebapckBar from 'webpackbar';
 import { Options } from '@remax/types';
@@ -81,9 +82,15 @@ export default function webpackConfig(api: API, options: Options): webpack.Confi
  appConfig,
  }),
  });
-
  config.plugin('webpack-virtual-modules').use(virtualModules);
 
+ const publicDirPath = path.join(options.cwd, 'public');
+ if (fs.existsSync(publicDirPath)) {
+ config
+ .plugin('webpack-copy-plugin')
+ .use(CopyPlugin, [[{ from: publicDirPath, to: path.join(options.cwd, options.output) }]]);
+ }
+
  config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [
  {
  template: path.resolve(__dirname, '../../../template/index.html.ejs'),

packages/remax-cli/typings/index.d.ts

@@ -9,6 +9,7 @@ declare module '@babel/helper-module-imports';
 declare module 'scheduler';
 declare module 'sander';
 declare module 'webpack-virtual-modules';
+declare module 'copy-webpack-plugin';
 declare module 'webpack-node-externals';
 
 declare namespace jest {