Skip to content

Commit 3012bc6

Browse files
luozhang002binghaiwang
authored andcommitted
Refactor example (#477)
* refactor: refactor example to support open browser auto and hot reload * refactor:refactor example webpack.dev.conf.js
1 parent 2273a39 commit 3012bc6

File tree

13 files changed

+8051
-97
lines changed

13 files changed

+8051
-97
lines changed

example/README.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Play with OSS right in the browser!
44

5-
![Demo](screenshot.png?raw=true "OSS in Browser")
5+
<image src="https://img.alicdn.com/tfs/TB1tE5mvTtYBeNjy1XdXXXXyVXa-2538-1386.png" width="1000" height="500"/>
66

77
## Browser support
88

@@ -30,25 +30,24 @@ access.
3030

3131
### App setup
3232

33-
Fill in your appServer address and bucket name in `app.js`:
33+
Fill in your bucket name and region in `app.js`: (Note: ensure port 9000 is not used)
3434

3535
```js
36-
var appServer = '<your STS app server>';
3736
var bucket = '<your bucket name>';
3837
var region = 'oss-cn-hangzhou';
3938
```
4039

41-
Build the JS file
40+
Then set env
4241

4342
```
44-
npm install && webpack
45-
```
46-
43+
ALI_SDK_STS_ID={your sts accessKeyId} ALI_SDK_STS_SECRET={your sts accessKeySecret} ALI_SDK_STS_ROLE={your rolearn}
44+
```
4745

48-
Then set env and start the server
46+
Start the server
4947

5048
```
51-
ALI_SDK_STS_ID={your sts accessKeyId} ALI_SDK_STS_SECRET={your sts accessKeySecret} ALI_SDK_STS_ROLE={your rolearn} node server/app.js
49+
npm run start
50+
5251
```
5352

5453
Open the `http://localhost:3000` in browser

example/config/webpack.dev.conf.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const path = require('path')
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
const webpack = require('webpack')
4+
5+
const HtmlWebpackPluginConfig = {
6+
filename: 'index.html',
7+
template: './template/index.html',
8+
inject:'body',
9+
}
10+
11+
module.exports = {
12+
context: path.resolve(__dirname,'../src'),
13+
entry: './main',
14+
output:{
15+
path:path.resolve(__dirname,'../dist'),
16+
filename: './[hash]app.js',
17+
hashDigestLength: 8
18+
},
19+
module: {
20+
rules: [
21+
{
22+
test: /\.css$/,
23+
use: [ 'style-loader', 'css-loader' ]
24+
},
25+
{
26+
test: /\.(eot|woff|woff2)$/,
27+
loader: "file-loader"
28+
},
29+
{
30+
test: /\.js$/,
31+
exclude: /node_modules/,
32+
use: {
33+
loader: 'babel-loader',
34+
}
35+
}
36+
]
37+
},
38+
plugins: [
39+
new HtmlWebpackPlugin(HtmlWebpackPluginConfig),
40+
new webpack.ProvidePlugin({
41+
$: 'jquery',
42+
jQuery: 'jquery',
43+
'window.jQuery': 'jquery',
44+
Popper: ['popper.js', 'default']
45+
})
46+
],
47+
devServer: {
48+
contentBase: path.resolve(__dirname, "../dist"),
49+
port: 3000,
50+
open: true, // open browser auto
51+
index:'index.html', // like HtmlWebpackPlugin
52+
inline:true, // default:true
53+
hot:false,
54+
compress:true // compress
55+
}
56+
}

0 commit comments

Comments
 (0)