riant-scripts
Create your app using create-react-app , and tweak the create-react-app webpack config(s) , especially preset
less-loader
andstylus-loader
.
中文文档
Install riant-scripts
$ npm install riant-scripts --save-dev
Schema
/* riant.config.js */moduleexports = alias: instanceof: 'Function' 'Object' babelPlugins: instanceof: 'Function' 'Array' chainWebpack: instanceof: 'Function' configureWebpack: instanceof: 'Function' css: type: 'object' properties: modules: type: 'boolean' sourceMap: type: 'boolean' loaderOptions: type: 'object' properties: css: type: 'object' less: type: 'object' stylus: type: 'object' postcss: type: 'object' devServer: instanceof: 'Function' 'Object' extensions: instanceof: 'Function' 'Array' externals: instanceof: 'Function' 'Array' 'RegExp' 'Object' filenameHashing: type: 'boolean' jest: instanceof: 'Function' 'Object' pages: type: 'object' parallel: type: 'boolean' 'number' paths: instanceof: 'Function' 'Object' riantPlugins: instanceof: 'Array' useEslintrc: type: 'boolean'
Create a riant.config.js file in the root directory
- Create aliases to import or require certain modules more easily
/* riant.config.js */moduleexports = alias: '@': path
/* riant.config.js */moduleexports = { chainedMap; }
- Add plugins to Babel
/* riant.config.js */moduleexports = babelPlugins: 'import' libraryName: 'antd' libraryDirectory: 'es' style: 'css' 'fix-import-imports' '@babel/plugin-proposal-decorators' legacy: true
/* riant.config.js */moduleexports = { plugins; }
/* riant.config.js */moduleexports = { return plugins; }
- Customize Webpack config
/* riant.config.js */moduleexports = { if env === 'production' // supporting Internet Explorer 9 chainedConfig ; // without `console.log` chainedConfigoptimization; // code splitting if env !== 'test' chainedConfig optimization; }
/* riant.config.js */moduleexports = { if env === 'production' // without `console.log` objectConfig optimization minimizer0 options terserOptions compress pure_funcs = 'console.log'; }
- Customize style loader options
/* riant.config.js */moduleexports = css: loaderOptions: stylus: define: '$cdn': 'https://cdn.jsdelivr.net'
- Customize Dev Server config
/* riant.config.js */moduleexports = devServer: proxy: '/api': target: 'http://localhost:8088' changeOrigin: true
/* riant.config.js */moduleexports = { devConfigproxy = '/api': target: 'http://localhost:8088' changeOrigin: true ; }
- Attempt to resolve these extensions in order
/* riant.config.js */moduleexports = extensions: '.properties'
/* riant.config.js */moduleexports = { chainedSet; }
- Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime
/* riant.config.js */moduleexports = externals: jquery: 'jQuery'
/* riant.config.js */moduleexports = { return jquery: 'jQuery' ; }
- Attempt to remove hash from filename
/* riant.config.js */moduleexports = filenameHashing: false
- Attempt to update jest config
/* riant.config.js */moduleexports = { return jestConfig; }
- multi-page setup
/* riant.config.js */moduleexports = pages: home: 'src/home.js' form: 'src/form.js' notfound: 'src/notfound.js'
- Attempt to update paths
/* riant.config.js */moduleexports = paths:
/* riant.config.js */moduleexports = { }
- use thread-loader for Babel or TypeScript transpilation
/* riant.config.js */moduleexports = parallel: true
- Add progress bar
/* riant.config.js */moduleexports = progressBar: true
- Add plugins to riant-scripts
/* riant.config.js */moduleexports = riantPlugins: { }
- Use eslintrc
/* riant.config.js */moduleexports = useEslintrc: true
Extended Webpack Configuration
- supporting Internet Explorer 9
/* riant.config.js */moduleexports = { if env === 'production' chainedConfig ; }
- without console.log
/* riant.config.js */moduleexports = { if env === 'production' chainedConfigoptimization ; }
- code splitting
/* riant.config.js */moduleexports = { if env !== 'test' chainedConfigoptimization ; }
Create .env.production file in the root directory
- Set env for production
# Source maps are resource heavy and can cause out of memory issue for large source files.GENERATE_SOURCEMAP=false # Some apps do not need the benefits of saving a web request, so not inlining the chunk makes for a smoother build process.INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=30000
Code Structure
+-- your-project
| +-- riant.config.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
Use riant-scripts instead of react-scripts in npm scripts of package.json for start、build and test
/* package.json */ "scripts": {- "start": "react-scripts start",+ "start": "riant-scripts start",- "build": "react-scripts build",+ "build": "riant-scripts build",- "test": "react-scripts test --env=jsdom",+ "test": "riant-scripts test --env=jsdom", "eject": "react-scripts eject"}
Note: Keep the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making riant-scripts no longer required.
Start the Dev Server
$ npm start
Build your app
$ npm run build