1.x

.gitignore

@@ -23,3 +23,4 @@ npm-debug.log
 dist
 yarn.lock
 **/.vscode
+package-lock.json

antd-antm/package.json

@@ -14,11 +14,11 @@
     "start:mobile": "RUN_ENV=mobile dora --plugins \"proxy,webpack,livereload?enableJs=false&injectHost=127.0.0.1\""
   },
   "dependencies": {
-    "antd-mobile": "^1.0.0",
+    "antd-mobile": "1.x",
     "antd": "^1.0.0",
     "babel-runtime": "6.x",
-    "react": "15.3.x",
-    "react-dom": "15.3.x"
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
   },
   "devDependencies": {
     "atool-build": "^0.9.0",
@@ -41,4 +41,4 @@
   "pre-commit": [
     "lint"
   ]
-}
+}

antd-mobile-web/README.md

@@ -9,7 +9,7 @@ npm install
 npm start
 ```
 
-open http://localhost:8080/
+open http://localhost:8000/
 
 ## Build
 
@@ -29,4 +29,4 @@ open http://localhost:8080/dist/report.html
 
 [antd-mobile](https://github.com/ant-design/ant-design-mobile) is React Native first library.
 
-[antd-mobile-web](https://github.com/cncolder/antd-mobile-web) make it easy for web developer.
+[antd-mobile-web](https://github.com/cncolder/antd-mobile-web) make it easy for web developer.

antd-mobile-web/package.json

@@ -5,12 +5,12 @@
     "description": "Ant design mobile web entry",
     "license": "MIT",
     "scripts": {
-        "start": "webpack-dev-server",
+        "start": "webpack-dev-server --host 0.0.0.0 --port 8000",
         "build": "webpack --progress --colors --display-reasons --display-used-exports --display-optimization-bailout",
         "analyzer": "webpack --profile --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json -m static -O -r dist/report.html"
     },
     "devDependencies": {
-        "antd-mobile": "^1.5.0",
+        "antd-mobile": "1.x",
         "antd-mobile-web": "^1.5.0",
         "babel-core": "^6.25.0",
         "babel-loader": "^7.1.1",
@@ -20,4 +20,4 @@
         "webpack-bundle-analyzer": "^2.8.3",
         "webpack-dev-server": "^2.5.1"
     }
-}
+}

antm-roadhog/package.json

@@ -3,20 +3,19 @@
   "scripts": {
     "start": "roadhog server",
     "build": "roadhog build",
-    "lint": "eslint --ext .js src test",
-    "precommit": "npm run lint"
+    "lint": "eslint --ext .js src test"
   },
   "engines": {
     "install-node": "6.9.2"
   },
   "theme": "./theme.config.js",
   "dependencies": {
-    "antd-mobile": "^1.0.3",
+    "antd-mobile": "1.x",
     "babel-runtime": "^6.9.2",
     "dva": "^1.2.1",
     "rc-form": "^1.3.0",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0"
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

create-react-app/.gitignore

@@ -19,4 +19,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-yarn.lock

create-react-app/README.md

@@ -31,82 +31,89 @@ Open browser at http://localhost:3000/, it renders a header saying "Welcome to R
 First we install antd-mobile and [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)(A babel plugin for importing components on demand [principle](https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started#Import-on-Demand)) from yarn or npm.
 
   ```bash
+  # you must run `eject` first
+  $ yarn run eject
   $ yarn add antd-mobile
-  $ yarn add babel-plugin-import --dev
+  $ yarn add babel-plugin-import less-loader postcss-pxtorem [email protected] --dev
   ```
 
 1. Modify `config/webpack.config.dev.js`
 
-    ```js
+    ```diff
+    + const pxtorem = require('postcss-pxtorem');
+    ...
     extensions: ['.web.js', '.js', '.json', '.jsx'],
     ...
     rules: [
-      {
-        exclude: [
-          ...
-          /\.less$/,
-          ...
-        ]
-      },
       ...
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,
         ...
         options: {
-          plugins: [
-            ['import', { libraryName: 'antd-mobile', style: true }],
-          ],
+    +     plugins: [
+    +       ['import', { libraryName: 'antd-mobile', style: true }],
+    +     ],
           cacheDirectory: true,
         }
       },
       ...
       // It is generally necessary to use the Icon component, need to configure svg-sprite-loader
+    + {
+    +  test: /\.(svg)$/i,
+    +  loader: 'svg-sprite-loader',
+    +  include: [
+    +    require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. svg files of antd-mobile
+    +    path.resolve(__dirname, '../src/'),  // folder of svg files in your project
+    +  ]
+    + },
+    + {
+    +  test: /\.less$/,
+    +  use: [
+    +    require.resolve('style-loader'),
+    +    require.resolve('css-loader'),
+    +    {
+    +      loader: require.resolve('postcss-loader'),
+    +      options: {
+    +        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+    +        plugins: () => [
+    +          autoprefixer({
+    +            browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
+    +          }),
+    +          pxtorem({ rootValue: 100, propWhiteList: [] })
+    +        ],
+    +      },
+    +    },
+    +    {
+    +      loader: require.resolve('less-loader'),
+    +      options: {
+    +        modifyVars: { "@primary-color": "#1DA57A" },
+    +      },
+    +    },
+    +  ],
+    + },
       {
-        test: /\.(svg)$/i,
-        loader: 'svg-sprite-loader',
-        include: [
-          require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. svg files of antd-mobile
-          // path.resolve(__dirname, 'src/my-project-svg-foler'),  // folder of svg files in your project
-        ]
-      },
-      {
-        test: /\.less$/,
-        use: [
-          require.resolve('style-loader'),
-          require.resolve('css-loader'),
-          {
-            loader: require.resolve('postcss-loader'),
-            options: {
-              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-              plugins: () => [
-                autoprefixer({
-                  browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
-                }),
-                pxtorem({ rootValue: 100, propWhiteList: [] })
-              ],
-            },
-          },
-          {
-            loader: require.resolve('less-loader'),
-            options: {
-              modifyVars: { "@primary-color": "#1DA57A" },
-            },
-          },
+        exclude: [
+          ...
+    +    /\.less$/,
+    +    /\.svg$/,
+          ...
         ],
-      }
+        loader: require.resolve('file-loader'),
+        ...
+      },
     ]
     ```
     > Note, we only modified webpack.config.dev.js now, if you wish this config working on production environment, you need to update webpack.config.prod.js as well.
 
 2. Entry html page Required settings:
 
-  * Use HD program settings, see [antd-mobile-0.8-以上版本「高清」方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE) for details.
+  * Use HD program settings, see [antd-mobile@0.8-1.x HD setting](https://github.com/ant-design/ant-design-mobile/wiki/HD) for details.
   * Use [FastClick](https://github.com/ftlabs/fastclick), ref [#576](https://github.com/ant-design/ant-design-mobile/issues/576)
   * Use Promise fallback support (some Android phones do not support Promise), as follows:
 
     ```js
     if(!window.Promise) {
       document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
     }
-    ```  
+    ```

create-react-app/config/env.js

@@ -78,13 +78,10 @@ function getClientEnvironment(publicUrl) {
     );
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce(
-      (env, key) => {
-        env[key] = JSON.stringify(raw[key]);
-        return env;
-      },
-      {}
-    ),
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
   };
 
   return { raw, stringified };

create-react-app/config/paths.js

@@ -33,8 +33,8 @@ const getPublicUrl = appPackageJson =>
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 function getServedPath(appPackageJson) {
   const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl = envPublicUrl ||
-    (publicUrl ? url.parse(publicUrl).pathname : '/');
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
   return ensureSlash(servedUrl, true);
 }