打包配置优化 (#569)

* feat: 浏览器sdk解偶polyfill * fix: 删除多余依赖 * fix: 打包配置更新 * fix: 声明文件 * fix: 打包优化，示例文件exampless --------- Co-authored-by: wangting31 <[email protected]>
baidubce · May 31, 2024 · 0427745 · 0427745
1 parent fe734d0
commit 0427745
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 80 deletions.
diff --git a/javascript/README.md b/javascript/README.md
@@ -482,4 +482,42 @@ async function main() {
 }
 
 main();
-```
+```
+
+### HTML 中使用, 引入 dist 文件中的 bundle.iife.js 即可使用，参考example/index.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Qianfan SDK</h1>
+    <script src="../dist/bundle.iife.js"></script>
+    <script>
+        const {ChatCompletion} = QianfanSDK;
+        const client =  new ChatCompletion({QIANFAN_BASE_URL: 'http://172.18.178.105:8002', QIANFAN_CONSOLE_API_BASE_URL: ' http://172.18.178.105:8003'})
+     async function main() {
+    const stream =  await client.chat({
+        messages: [
+            {
+                role: 'user',
+                content: '等额本金和等额本息有什么区别？',
+            },
+        ],
+        stream: true,
+    }, 'ERNIE-Bot-turbo');
+    console.log('流式返回结果');
+    for await (const chunk of stream) {
+        console.log(chunk);
+    }
+}
+
+main();
+    </script>
+</body>
+</html>
+```
diff --git a/javascript/babel.config.cjs b/javascript/babel.config.cjs
@@ -1,6 +1,16 @@
 module.exports = {
     presets: [
-        ['@babel/preset-env', {targets: {node: 'current'}}],
+        [
+            '@babel/preset-env',
+            {
+                'targets': {
+                    'node': 'current',
+                },
+                'modules': false,
+                'useBuiltIns': 'usage',
+            },
+        ],
+        '@babel/preset-react',
         '@babel/preset-typescript',
     ],
 };
diff --git a/javascript/src/test/chatCompletion.ts → javascript/examples/chatCompletion.ts b/javascript/src/test/chatCompletion.ts → javascript/examples/chatCompletion.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {ChatCompletion, setEnvVariable} from '../index';
+import {ChatCompletion, setEnvVariable} from '../src/index';
 
 // 修改env文件
 // setEnvVariable('QIANFAN_AK','***');

diff --git a/javascript/src/test/completiont.ts → javascript/examples/completiont.ts b/javascript/src/test/completiont.ts → javascript/examples/completiont.ts
diff --git a/javascript/src/test/embedding.ts → javascript/examples/embedding.ts b/javascript/src/test/embedding.ts → javascript/examples/embedding.ts
diff --git a/javascript/src/test/image2text.ts → javascript/examples/image2text.ts b/javascript/src/test/image2text.ts → javascript/examples/image2text.ts
diff --git a/javascript/examples/index.html b/javascript/examples/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Qianfan SDK</h1>
+    <script src="../dist/bundle.iife.js"></script>
+    <script>
+        const {ChatCompletion} = QianfanSDK;
+        const client =  new ChatCompletion({QIANFAN_BASE_URL: 'http://172.18.178.105:8002', QIANFAN_CONSOLE_API_BASE_URL: ' http://172.18.178.105:8003'})
+     async function main() {
+    const stream =  await client.chat({
+        messages: [
+            {
+                role: 'user',
+                content: '等额本金和等额本息有什么区别？',
+            },
+        ],
+        stream: true,
+    }, 'ERNIE-Bot-turbo');
+    console.log('流式返回结果');
+    for await (const chunk of stream) {
+        console.log(chunk);
+    }
+}
+
+main();
+    </script>
+</body>
+</html>
diff --git a/javascript/src/test/plugins.ts → javascript/examples/plugins.ts b/javascript/src/test/plugins.ts → javascript/examples/plugins.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Plugin, setEnvVariable} from '../index';
+import {Plugin, setEnvVariable} from '../src/index';
 
 // 修改env文件
 // setEnvVariable('QIANFAN_AK','***');

diff --git a/javascript/src/test/reranker.ts → javascript/examples/reranker.ts b/javascript/src/test/reranker.ts → javascript/examples/reranker.ts
diff --git a/javascript/src/test/test2image.ts → javascript/examples/test2image.ts b/javascript/src/test/test2image.ts → javascript/examples/test2image.ts
diff --git a/javascript/index.d.ts b/javascript/index.d.ts
@@ -0,0 +1 @@
+declare module '@baiducloud/qianfan'
diff --git a/javascript/package.json b/javascript/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@baiducloud/qianfan",
-    "version": "0.0.11-alpha.3",
+    "version": "0.0.11-alpha.5",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
@@ -10,8 +10,10 @@
         "url": "https://github.com/baidubce/bce-qianfan-sdk"
     },
     "description": "",
-    "main": "dist/bundle.js",
-    "type": "commonjs",
+    "main": "dist/bundle.cjs",
+    "module": "dist/bundle.esm.js",
+    "browser": "dist/bundle.esm.js",
+    "type": "module",
     "scripts": {
         "start": "NODE_ENV=production ts-node src/test/chatCompletion",
         "build": "npx rollup -c rollup.config.mjs",
@@ -23,6 +25,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
+        "@babel/preset-react": "^7.24.6",
         "@rollup/plugin-inject": "^5.0.5",
         "@rollup/plugin-json": "^6.1.0",
         "@types/node-fetch": "^2.6.11",
@@ -57,8 +60,8 @@
         "prettier": "^3.2.5",
         "rollup-plugin-ignore": "^1.0.10",
         "rollup-plugin-node-builtins": "^2.1.2",
-        "rollup-plugin-node-globals": "^1.4.0",
         "rollup-plugin-node-polyfills": "^0.2.1",
+        "rollup-plugin-terser": "^7.0.2",
         "ts-node": "^10.9.2"
     }
 }
diff --git a/javascript/rollup.config.mjs b/javascript/rollup.config.mjs
@@ -6,9 +6,9 @@ import json from '@rollup/plugin-json';
 import eslint from '@rollup/plugin-eslint';
 import inject from '@rollup/plugin-inject';
 import ignore from 'rollup-plugin-ignore';
-import nodeGlobals from 'rollup-plugin-node-globals';
 import nodePolyfills from 'rollup-plugin-node-polyfills';
 import nodeBuiltins from 'rollup-plugin-node-builtins';
+import {terser} from 'rollup-plugin-terser';
 
 const isBrowserBuild = format => ['es', 'iife'].includes(format);
 
@@ -19,18 +19,16 @@ const createConfig = output => {
         }),
         json(),
         resolve({
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
             browser: isBrowserBuild(output.format),
             preferBuiltins: !isBrowserBuild(output.format),
             dedupe: ['buffer'],
         }),
         commonjs(),
         babel({
-            extensions: ['.js', '.ts'],
-            babelHelpers: 'bundled',
-            presets: [
-                '@babel/preset-env',
-                '@babel/preset-typescript',
-            ],
+            babelrc: false,
+            configFile: './babel.config.cjs',
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
         }),
         eslint({
             throwOnError: true,
@@ -46,13 +44,13 @@ const createConfig = output => {
 
     if (isBrowserBuild(output.format)) {
         plugins.push(
-            nodeGlobals(),
             nodePolyfills({
                 exclude: ['crypto'],
             }),
             nodeBuiltins()
         );
         plugins.push(ignore(['dotenv', 'os', 'path']));
+        plugins.push(terser());
     }
 
     return {
@@ -62,8 +60,10 @@ const createConfig = output => {
         external: isBrowserBuild(output.format) ? [] : ['dotenv'],
         onwarn: function (warning, warn) {
             if (warning.code === 'CIRCULAR_DEPENDENCY') {
-                if (warning.importer?.includes('node_modules/bottleneck')
-                  || warning.importer?.includes('node_modules/asn1.js')) {
+                if (
+                    warning.importer?.includes('node_modules/bottleneck')
+                    || warning.importer?.includes('node_modules/asn1.js')
+                ) {
                     return;
                 }
             }
@@ -74,14 +74,15 @@ const createConfig = output => {
 
 export default [
     createConfig({
-        file: 'dist/bundle.cjs.js',
+        file: 'dist/bundle.cjs',
         format: 'cjs',
-        sourcemap: false,
+        exports: 'named',
     }),
     createConfig({
         file: 'dist/bundle.esm.js',
         format: 'es',
-        sourcemap: false,
+        preferConst: true,
+        exports: 'named',
     }),
     createConfig({
         file: 'dist/bundle.iife.js',

diff --git a/javascript/tsconfig.json b/javascript/tsconfig.json
@@ -11,6 +11,6 @@
         "resolveJsonModule": true,
         "noEmit": false
     },
-    "include": ["src"],
+    "include": ["src", "examples"],
     "exclude": ["node_modules", "dist"]
 }