alibaba · njugray · Apr 18, 2019 · Mar 22, 2019 · Mar 22, 2019 · Mar 22, 2019
diff --git a/examples/simple/.manifest.json b/examples/simple/.manifest.json
@@ -0,0 +1,9 @@
+{
+  "manifest.js": "manifest_6498f2ed.js",
+  "index.js": "index_48ebde7c.js",
+  "script.js": "script_3a4833fb.js",
+  "script.css": "script_93bb8fc6.css",
+  "static.js": "static_3f3fa875.js",
+  "style.js": "style_6d3bbe58.js",
+  "style.css": "style_93bb8fc6.css"
+}
diff --git a/examples/simple/client/script/index.jsx b/examples/simple/client/script/index.jsx
@@ -23,12 +23,12 @@ export default class View extends React.Component {
       <html>
         <head>
           <title>Script</title>
-          <link rel="stylesheet" href={helper.asset('/script.css')} />
+          <link rel="stylesheet" href={helper.asset('script.css')} />
         </head>
         <body>
           <div id="container" dangerouslySetInnerHTML={{ __html: html }} />
-          <script src={helper.asset('/manifest.js')} />
-          <script src={helper.asset('/script.js')} />
+          <script src={helper.asset('manifest.js')} />
+          <script src={helper.asset('script.js')} />
         </body>
       </html>
     );

diff --git a/examples/simple/client/style/index.jsx b/examples/simple/client/style/index.jsx
@@ -16,7 +16,7 @@ export default class View extends React.Component {
       <html>
         <head>
           <title>Styling</title>
-          <link rel="stylesheet" href={helper.asset('/style.css')} />
+          <link rel="stylesheet" href={helper.asset('style.css')} />
         </head>
         <body>
           <h1 className="title">Styling Page</h1>

diff --git a/examples/simple/config/config.default.js b/examples/simple/config/config.default.js
@@ -4,6 +4,9 @@ const path = require('path');
 
 module.exports = appInfo => ({
   keys: 'secrets',
+  view: {
+    useHashAsset: true,
+  },
   static: {
     dir: [
       {

diff --git a/packages/beidou-view-react/README.md b/packages/beidou-view-react/README.md
@@ -35,6 +35,7 @@ module.exports = appInfo => ({
     assetPath: '/build/',
   },
   view: {
+    useHashAsset:false,
     defaultViewEngine: 'react',
     defaultExtension: '.jsx',
     // Isomorphic directories

diff --git a/packages/beidou-view/README.md b/packages/beidou-view/README.md
@@ -4,6 +4,13 @@
 
 Used by internal react and rax plugins.
 
+# Config
+
+If `config.view.useHashAsset` is set true, beidou will use hashed assets on the page if not local env with the help of `webpack build`. You can set CDN path in `publicPath`, which will be included.
+Remember that, you should run `beidou build` first before use this feature.
+
+You can define the assets mapping file with `config.view.hashAssetPath`, the default value of which is `path.join(appInfo.baseDir, '.manifest.json')`.
+
 # Middlewares
 
 We introduced **View Middlewares** mechanism since `v1.0.0`. The rendering process is fully defined by a combination of middlewares, which means you can redefined them or add custom ones if needed.

diff --git a/packages/beidou-view/app.js b/packages/beidou-view/app.js
@@ -0,0 +1,22 @@
+'use strict';
+
+const path = require('path');
+const { getAssetManifest } = require('./lib/utils');
+
+module.exports = (app) => {
+  // get asset with hash from cwd/manifes.json;
+  if (app.config.view.useHashAsset) {
+    // define hashAssetPath once here,and according to beidou-core, beidou-view will be loaded first.
+    app.config.view.hashAssetPath =
+      app.config.view.hashAssetPath || path.join(app.baseDir, '.manifest.json');
+    if (app.config.env === 'local' || app.config.env === 'unittest') {
+      app.coreLogger.warn(
+        `Detect view.useHashAsset in ${app.config.env} env, will ignore it.`
+      );
+      app.assetManifest = {};
+      return;
+    }
+
+    app.assetManifest = getAssetManifest(app.config.view.hashAssetPath);
+  }
+};
diff --git a/packages/beidou-view/app/extend/helper.js b/packages/beidou-view/app/extend/helper.js
@@ -8,9 +8,11 @@ const helper = {
    * @param {Object} config asset config
    */
   [Symbol.for('beidou#asset')](filename, config) {
+    if (this.app.config.view.useHashAsset && this.app.assetManifest[filename]) {
+      filename = this.app.assetManifest[filename];
+    }
     const assetHost = config.host || config.assetHost;
     const { assetPath } = config;
-
     if (!assetHost) {
       return concatUrl(assetPath, filename);
     }

diff --git a/packages/beidou-view/config/config.default.js b/packages/beidou-view/config/config.default.js
@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = appInfo => ({
+  view: {
+    useHashAsset: false,
+    hashAssetPath: path.join(appInfo.baseDir, '.manifest.json'),
+  },
+});
diff --git a/packages/beidou-view/lib/utils.js b/packages/beidou-view/lib/utils.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const fs = require('fs');
 const normalizeUrl = require('normalizeurl');
 
 exports.concatUrl = function (...pathes) {
@@ -20,3 +21,13 @@ exports.concatUrl = function (...pathes) {
 };
 
 exports.normalizeUrl = normalizeUrl;
+exports.getAssetManifest = function (hashAssetPath) {
+  if (fs.existsSync(hashAssetPath)) {
+    const raw = fs.readFileSync(hashAssetPath, { encoding: 'utf8' });
+    return JSON.parse(raw);
+  } else {
+    throw new Error(
+      `Cannot find ${hashAssetPath}! Please check view.hashAssetPath config.`
+    );
+  }
+};
diff --git a/packages/beidou-view/test/fixtures/hash-asset-throw/build/index_ec3f4aa7.js b/packages/beidou-view/test/fixtures/hash-asset-throw/build/index_ec3f4aa7.js
diff --git a/packages/beidou-view/test/fixtures/hash-asset-throw/client/index.jsx b/packages/beidou-view/test/fixtures/hash-asset-throw/client/index.jsx
@@ -0,0 +1,43 @@
+import assert from 'assert';
+
+const testStr = 'base view test';
+
+/**
+ * Text component
+ *
+ * @export
+ * @class View
+ * @extends {React.Component}
+ */
+export default class View {
+  static async getInitialProps() {
+    return {
+      title: 'beidou',
+    };
+  }
+  static async getStore() {
+    return {
+      getState: () => ({ testStr }),
+    };
+  }
+
+  static async getPartial(props) {
+    assert(props.state === '{"testStr":"base view test"}');
+    return { partial: '', list: ['a', 'b', 'c'], store: 'store' };
+  }
+
+  render({ partial, list, store, title }) {
+    // See view.test.js BaseView.prototype.renderElement
+    const partialResult = 'fake renderElement';
+    assert(partial === partialResult);
+
+    assert(list.length === 3);
+    for (const item of list) {
+      assert(item === partialResult);
+    }
+
+    assert(store === partialResult);
+
+    assert(title === 'beidou');
+  }
+}
diff --git a/packages/beidou-view/test/fixtures/hash-asset-throw/config/config.default.js b/packages/beidou-view/test/fixtures/hash-asset-throw/config/config.default.js
@@ -0,0 +1,9 @@
+'use strict';
+const path = require('path');
+
+module.exports = _ => ({
+    view: {
+        useHashAsset: true,
+        hashAssetPath: '/foo/bar.json'
+    },
+});
diff --git a/packages/beidou-view/test/fixtures/hash-asset-throw/package.json b/packages/beidou-view/test/fixtures/hash-asset-throw/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "beidou-test-view-use-hash-asset-app"
+}
diff --git a/packages/beidou-view/test/fixtures/use-hash-asset-app/.manifest.json b/packages/beidou-view/test/fixtures/use-hash-asset-app/.manifest.json
@@ -0,0 +1,3 @@
+{
+    "index.js": "index_ec3f4aa7.js"
+}
diff --git a/packages/beidou-view/test/fixtures/use-hash-asset-app/build/index_ec3f4aa7.js b/packages/beidou-view/test/fixtures/use-hash-asset-app/build/index_ec3f4aa7.js
diff --git a/packages/beidou-view/test/fixtures/use-hash-asset-app/client/index.jsx b/packages/beidou-view/test/fixtures/use-hash-asset-app/client/index.jsx
@@ -0,0 +1,43 @@
+import assert from 'assert';
+
+const testStr = 'base view test';
+
+/**
+ * Text component
+ *
+ * @export
+ * @class View
+ * @extends {React.Component}
+ */
+export default class View {
+  static async getInitialProps() {
+    return {
+      title: 'beidou',
+    };
+  }
+  static async getStore() {
+    return {
+      getState: () => ({ testStr }),
+    };
+  }
+
+  static async getPartial(props) {
+    assert(props.state === '{"testStr":"base view test"}');
+    return { partial: '', list: ['a', 'b', 'c'], store: 'store' };
+  }
+
+  render({ partial, list, store, title }) {
+    // See view.test.js BaseView.prototype.renderElement
+    const partialResult = 'fake renderElement';
+    assert(partial === partialResult);
+
+    assert(list.length === 3);
+    for (const item of list) {
+      assert(item === partialResult);
+    }
+
+    assert(store === partialResult);
+
+    assert(title === 'beidou');
+  }
+}
diff --git a/packages/beidou-view/test/fixtures/use-hash-asset-app/config/config.default.js b/packages/beidou-view/test/fixtures/use-hash-asset-app/config/config.default.js
@@ -0,0 +1,8 @@
+'use strict';
+
+
+module.exports = _ => ({
+    view: {
+        useHashAsset: true,
+    },
+});
diff --git a/packages/beidou-view/test/fixtures/use-hash-asset-app/package.json b/packages/beidou-view/test/fixtures/use-hash-asset-app/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "beidou-test-view-use-hash-asset-app"
+}