Compile configuration Details
sourceRoot
string
Default: 'src'
Source code directory.
outputRoot
string
Default: 'dist'
The production directory after the code is compiled.
designWidth
number
Defalut value: 750
Design size, please see for detailsDesign and size unit。
defineConstants
object
Used to configure some global variables for use in the code.
The configuration method can be referred to Webpack DefinePlugin,for eaxmple:
module.exports = {
// ...
defineConstants: {
A: '"a"' // JSON.stringify('a')
}
}
alias
object
Used to configure directory aliases, thus facilitating the writing of code reference paths.
Use relative paths to write file references as follows.
import A from '../../components/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'
To avoid writing multi-level relative paths, we can configure alias
as follows.
module.exports = {
// ...
alias: {
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/package': path.resolve(__dirname, '..', 'package.json'),
'@/project': path.resolve(__dirname, '..', 'project.config.json'),
}
}
With the above configuration, the src/components
and src/utils
directories can be configured as aliases, and the package.json
and project.config.json
files in the root directory can be configured as aliases, so that the references in the code are rewritten as follows.
import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'
In order for the editor (VS Code) to not report errors and continue to use the automatic path completion feature, you need to configure paths
in jsconfig.json
or tsconfig.json
in the root of the project for the editor to recognize our alias in the following form.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"],
"@/package": ["./package.json"],
"@/project": ["./project.config.json"],
}
}
}
It is recommended that aliases start with
@/
rather than just@
,as there is a small chance of naming conflicts with somenpm
packages of thescoped
form.(eg:@tarojs/taro, @babel/core)
env
object
Used to set environment variables such as process.env.NODE_ENV
.
Suppose we need to distinguish between development and production environments, which can be configured as follows.
config/dev.js:
module.exports = {
// ...
env: {
NODE_ENV: '"development"' // JSON.stringify('development')
}
}
config/prod.js:
module.exports = {
// ...
env: {
NODE_ENV: '"production"' // JSON.stringify('production')
}
}
This allows the environment to be determined in the code by process.env.NODE_ENV === 'development'
.
copy
object
Used to copy files directly from the source code directory to the compiled production directory.
copy.patterns
array
This is used to specify the files or directories to be copied, each of which must contain the from
and to
configurations, representing the source and the directory to be copied to, respectively. You can also set the ignore
configuration to specify the files to be ignored. ignore
is a string of type glob, or an array of glob strings.
Note that
from
must specify a file or directory that exists, glob format is not supported.from
andto
directly top the file directories in the project root, it is recommended thatfrom
starts with thesrc
directory andto
starts with thedist
directory.
They are generally used in the following forms.
module.exports = {
// ...
copy: {
patterns: [
{ from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: ['*.js'] }, // Specify the directory to be copied
{ from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // Specify the files to be copied
]
}
}
copy.options
object
Copy the configuration, you can specify the global ignore.
module.exports = {
// ...
copy: {
options: {
ignore: ['*.js', '*.css'] // global ignore
}
}
}
plugins
array
Configure the Taro plugin.
When no parameters need to be passed to the plugin, the following writeup is equivalent.
module.exports = {
// ...
plugins: [
// 从本地绝对路径引入插件
'/absulute/path/plugin/filename',
// 引入 npm 安装的插件
'@tarojs/plugin-mock',
['@tarojs/plugin-mock'],
['@tarojs/plugin-mock', {}]
]
}
给插件传参:
module.exports = {
// ...
plugins: [
['@tarojs/plugin-mock', {
mocks: {
'/api/user/1': {
name: 'judy',
desc: 'Mental guy'
}
}
}]
]
}
presets
array
A preset is a collection of Taro plugins with the same configuration syntax as plugins。
module.exports = {
// ...
presets: [
// The set of plugins installed by npm
'@tarojs/preset-sth',
// The set of plugins installed by npm, and pass in the plugin parameters
['@tarojs/plugin-sth', {
arg0: 'xxx'
}],
// The plugin set is brought in from the local absolute path, and also if parameters need to be passed in as above
'/absulute/path/preset/filename',
]
}
terser
object
Configure the terser tool to compress JS code.
terser.enable
boolean
Default value true
Indicates if JS code compression is enabled.
terser.config
object
The specific configuration of the terser.
module.exports = {
// ...
terser: {
enable: true,
config: {
// The configuration items are the same as https://github.com/terser/terser#minify-options
}
}
}
The terser configuration only works in production mode. If you are using watch mode and want to enable terser, then you need to set
process.env.NODE_ENV
to'production'
.
csso
object
Configure the csso tool to compress CSS code.
csso.enable
boolean
Default value true
.
Indicates if CSS code compression is enabled.
csso.config
object
The specific configuration of csso.
module.exports = {
// ...
csso: {
enable: true,
config: {
// The configuration items are the same as https://github.com/css/csso#minifysource-options
}
}
}
The csso configuration only works in production mode. If you are using watch mode and want to enable csso, then you need to set
process.env.NODE_ENV
to'production'
.
sass
object
Used to control the compilation behavior of scss code, by default dart-sass
is used, the specific configuration can be found in sass.
When it is necessary to insert scss code into the headers of all scss files, this can be set with three additional parameters.
sass.resource
string | array
The absolute path to the scss file that needs to be globally injected. If multiple files are to be introduced, passing in an array is supported.
Passing in relative paths is supported when there is a projectDirectory configuration exists, relative paths are only supported.
sass.projectDirectory
string
The absolute address of the project root directory (if it is an mini-program cloud development template, it should be the client directory).
sass.data
string
Global scss variables, if the same variables are set in data and resource, then data takes precedence over resource.
Example of global injection of scss
Single file path form
When only the resource
field is available, the absolute path to the scss file can be passed.
module.exports = {
// ...
sass: {
resource: path.resolve(__dirname, '..', 'src/styles/variable.scss')
}
}
Multiple file path form
In addition, when only the resource
field is available, an array of paths can be passed in.
module.exports = {
// ...
sass: {
resource: [
path.resolve(__dirname, '..', 'src/styles/variable.scss'),
path.resolve(__dirname, '..', 'src/styles/mixins.scss')
]
}
}
Specify the project root path form
You can additionally configure the projectDirectory
field so that you can write relative paths in resource
.
module.exports = {
// ...
sass: {
resource: [
'src/styles/variable.scss',
'src/styles/mixins.scss'
],
projectDirectory: path.resolve(__dirname, '..')
}
}
Pass in the scss variable string
The $nav-height variable declared in data has the highest priority.
module.exports = {
// ...
sass: {
resource: [
'src/styles/variable.scss',
'src/styles/mixins.scss'
],
projectDirectory: path.resolve(__dirname, '..'),
data: '$nav-height: 48px;'
}
}
mini
object
Dedicated mini program configuration.
mini.baseLevel
number
Default value: 16
For mini-program where template
templates do not support recursion (e.g. WeChat, QQ, Jingdong), Taro will loop baseLevel times for all templates to support recursive calls to similar templates.
However, looping too many times can result in a rather large base
template, so you can use the baseLevel
configuration item to configure fewer loop levels when your nesting level is not too deep.
Of course, when the nesting level is deep, you can also increase the baseLevel to avoid some problems when you reach the loop limit and Taro calls a custom component to restart the loop.
mini.compile
object
The configuration related to the compilation process of the mini program
mini.compile.exclude
array
Configure the mini program compilation process to exclude files that do not need to be compiled by Taro, the array can contain specific file paths or can be a judgment function, same as Rule.exclude.
Assuming that a file is to be excluded, the specific path of the file to be excluded can be configured as follows.
module.exports = {
// ...
mini: {
// ...
compile: {
exclude: [
path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
]
}
}
}
It is also possible to configure the judgment function.
module.exports = {
// ...
mini: {
// ...
compile: {
exclude: [
modulePath => modulePath.indexOf('vod-wx-sdk-v2') >= 0
]
}
}
}
mini.compile.include
array
Configure additional files that need to be compiled by Taro in the same way as [mini.compile.exclude](. /config-detail#minicompileexclude) in the same way as Rule.include.
For example, Taro does not compile files in node_modules
by default, you can use this configuration to make Taro compile files in node_modules
.
mini.webpackChain
function
Customize the Webpack configuration.
This function receives three arguments. The first argument is the webpackChain object, which can be modified by referring to the webpack-chain API, the second argument is the webpack
instance, and the third argument PARSE_AST_ TYPE
is the set of file types that the mini program is compiled with.
The third parameter takes the following values:
export enum PARSE_AST_TYPE {
ENTRY = 'ENTRY',
PAGE = 'PAGE',
COMPONENT = 'COMPONENT',
NORMAL = 'NORMAL',
STATIC = 'STATIC'
}
Example:
// This is an example of adding a raw-loader to directly reference an md file in a project
module.exports = {
// ...
mini: {
// ...
webpackChain (chain, webpack) {
chain.merge({
module: {
rule: {
myloader: {
test: /\.md$/,
use: [{
loader: 'raw-loader',
options: {}
}]
}
}
}
})
}
}
}
// This is an example of adding a plugin
module.exports = {
// ...
mini: {
// ...
webpackChain (chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: require('npm-install-webpack-plugin'),
args: [{
// Use --save or --save-dev
dev: false,
// Install missing peerDependencies
peerDependencies: true,
// Reduce amount of console logging
quiet: false,
// npm command used inside company
npm: 'cnpm'
}]
}
}
})
}
}
}
mini.output
object
The output option that can be used to modify and extend Webpack, the configuration items refer to documentation。
mini.enableSourceMap
boolean
Default value: true
in watch mode, otherwise false
.
Used to control whether to generate sourceMap corresponding to js, css.
mini.sourceMapType
string
Default value: 'cheap-module-source-map'
Detail configuration refer to Webpack devtool configuration。
mini.debugReact
Supported since v3.0.8
boolean
Default value: false
.
Specifies whether the code related to the React framework uses the development environment (uncompressed) code, the default is to use the production environment (compressed) code.
mini.minifyXML
Supported since v3.0.8
object
About the configuration related to compressing mini program xml files.
mini.minifyXML.collapseWhitespace
boolean
Default value: false
.
If or not to merge spaces in the xml file.
mini.postcss
object
Configure postcss
related plugins.
module.exports = {
// ...
mini: {
// ...
postcss: {
// The autoprefixer configuration can be performed. configuration items refer to documentation https://github.com/postcss/autoprefixer
autoprefixer: {
enable: true,
config: {
// autoprefixer configuration items
}
},
pxtransform: {
enable: true,
config: {
// pxtransform configuration items
selectorBlackList: ['body']
}
},
// mini program styles referencing local resources inline
url: {
enable: true,
config: {
limit: 10240 // Set upper limit of conversion size
}
},
// css modules function switches and related configuration
cssModules: {
enable: false, // Default is false, if you want to use the css modules function, set it to true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
mini.commonChunks
array | function
Used to tell the Taro compiler which public files it needs to extract, supports two types of configuration.
The configuration value of commonChunks
based on the name of the common chunks in the webpack configuration optimization.runtimeChunk and optimization.splitChunks . Default value of webpack.optimization configuration in Taro Source Code。
If you need to split public files by yourself, please override the
optimization.runtimeChunk
andoptimization.splitChunks
via webpackChain configuration to override theoptimization.runtimeChunk
andoptimization.splitChunks
configurations. Then specify the public entry file with thiscommonChunks
configuration.
String Array Approach
Default values for common compilation: ['runtime', 'vendors', 'taro', 'common']
Default values when compiling as a WeChat mini program plugin: ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']
You can pass in an array of names of public files that need to be extracted.
Example:
module.exports = {
// ...
mini: {
// ...
commonChunks: ['runtime', 'vendors', 'taro', 'common']
}
}
These public files represent.
runtime
: webpack runtime entrytaro
: Taro-related dependencies in node_modulesvendors
: public dependencies of node_modules other than Tarocommon
: common logic for business code in the project
Function method
The configuration is performed by manipulating the default public file array of the input parameters and returning a new array as follows:
module.exports = {
// ...
mini: {
// ...
commonChunks (commonChunks) {
// The value of commonChunks is the default array of public filenames
commonChunks.push('yourCustomCommonChunkName')
return commonChunks
}
}
}
mini.addChunkPages
function
Specify the public files that need to be referenced separately for certain pages.
For example, when using mini program sub-packaging, in order to reduce the size of the main package, the sub-packaged pages want to introduce their own public files and don't want to put them directly inside the main package. Then we can first use the webpackChain configuration to abstract the public files of the sub-package separately, and then configure the introduction of the public files of the sub-package via mini.addChunkPages
for the sub-package page, which is used in the following way.
mini.addChunkPages
is configured as a function that accepts two parameters
pages
parameter is of type Map, which is used to add public files to the page- the
pagesNames
parameter is a list of all page identifiers for the current application, which can be printed to see the page identifiers
For example, to add eating
and morning
to the pages/index/index
page, the following two public files are extracted.
module.exports = {
// ...
mini: {
// ...
addChunkPages (pages: Map<string, string[]>, pagesNames: string[]) {
pages.set('pages/index/index', ['eating', 'morning'])
}
}
}
mini.optimizeMainPackage
object
Optimize the size of the main package
After a simple configuration like the following, you can avoid that modules not introduced in the main package are not extracted into commonChunks
, this function will analyze the dependencies of modules and chunks during packaging, filter out the modules not referenced in the main package to extract it into the sub-package, the following are the two types of sub-package public modules
extracted.
sub-package root/sub-vendors.(js|wxss)
- If the module is only referenced by multiple pages within a
single subpackage
, it is extracted to the sub-vendors file in the root of that subpackage.
- If the module is only referenced by multiple pages within a
sub-package root/sub-common/*. (js|wxss)
- If the module is referenced by pages in
multiple sub-packages
, it will normally be extracted to the public module of the main package, but here, to ensure the optimal size of the main package, it will first be extracted to a public module, and then copied to the sub-common folder of the corresponding sub-package (because the mini program cannot introduce files across sub-packages, so here you need to make a copy of each sub-package) It is important to note that this will result in a larger size of the total package.
- If the module is referenced by pages in
module.exports = {
// ...
mini: {
// ...
optimizeMainPackage: {
enable: true
}
}
}
If there is a module that does not want to go through the sub-package extraction rules, you can configure it in exclude so that the module will go through the original extraction scheme and be extracted into the main package, like the following (absolute paths and functions are supported).
module.exports = {
// ...
mini: {
// ...
optimizeMainPackage: {
enable: true,
exclude: [
path.resolve(__dirname, 'moduleName.js'),
(module) => module.resource.indexOf('moduleName') >= 0
]
}
}
}
mini.styleLoaderOption
object
Additional configuration of style-loader
, configuration items refer to documentation,eg:
module.exports = {
// ...
mini: {
// ...
styleLoaderOption: {
insertAt: 'top'
}
}
}
mini.cssLoaderOption
object
Additional configuration of css-loader
, configuration items refer to documentation,eg:
module.exports = {
// ...
mini: {
// ...
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
}
mini.sassLoaderOption
object
Additional configuration of sass-loader
, configuration items refer to documentation, eg:
module.exports = {
// ...
mini: {
// ...
sassLoaderOption: {
implementation: require("node-sass")
}
}
}
mini.lessLoaderOption
Supported since v3.0.26
object
Additional configuration of less-loader
, configuration items refer to documentation,eg:
module.exports = {
// ...
mini: {
// ...
lessLoaderOption: {
lessOptions: {
strictMath: true,
noIeCompat: true
}
}
}
}
mini.stylusLoaderOption
object
Additional configuration of stylus-loader
, configuration items refer to documentation。
mini.miniCssExtractPluginOption
object
Additional configuration of mini-css-extract-plugin
, configuration items refer to documentation。
module.exports = {
// ...
mini: {
// ...
miniCssExtractPluginOption: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
}
mini.imageUrlLoaderOption
object
The url-loader
configuration for png | jpg | jpeg | gif | bpm | svg
files. The configuration items refer to documentation。
mini.mediaUrlLoaderOption
object
The url-loader
configuration for mp4 | webm | ogg | mp3 | wav | flac | aac
files. The configuration items refer to documentation,eg:
module.exports = {
// ...
mini: {
// ...
mediaUrlLoaderOption: {
limit: 8192
}
}
}
mini.fontUrlLoaderOption
object
The url-loader
configuration for woff | woff2 | eot | ttf | otf
files. The configuration items refer to documentation。
h5
H5-specific configuration.
h5.entry
object
The input option can be used to modify and extend Webpack documentation。
module.exports = {
// ...
h5: {
// ...
entry: {
home: ['./home.js'],
about: ['./about.js'],
contact: ['./contact.js']
}
}
}
h5.output
object
The output option that can be used to modify and extend Webpack, the configuration items refer to documentation。
module.exports = {
// ...
h5: {
// ...
output: {
filename: 'js/[name].[hash:8].js',
chunkFilename: 'js/[name].[chunkhash:8].js'
}
}
}
h5.publicPath
string
Defalut value: '/'
Set the directory where the output parsed files are to be sent.
h5.staticDirectory
string
Defalut value: 'static'
h5 Compiled static files directory.
h5.chunkDirectory
string
Defalut value: 'chunk'
The directory where the non-entry js files are stored after compilation, mainly affecting the path to dynamically introduced pages
.
h5.devServer
object
Preview the configuration of the service, you can change parameters such as ports. Specific configuration reference webpack-dev-server。
Example:
修改端口:
module.exports = {
// ...
h5: {
// ...
devServer: {
port: 10086
}
}
}
Enable https service
module.exports = {
// ...
h5: {
// ...
devServer: {
https: true
}
}
}
h5.webpackChain
function
Customize the Webpack configuration.
This function receives two arguments, the first one is the webpackChain object, which can be modified by referring to the webpack-chain API, and the second argument is the webpack
instance.
例子:
// This is an example of adding a raw-loader to directly reference an md file in a project
module.exports = {
// ...
h5: {
// ...
webpackChain (chain, webpack) {
chain.merge({
module: {
rule: {
myloader: {
test: /\.md$/,
use: [{
loader: 'raw-loader',
options: {}
}]
}
}
}
})
}
}
}
// This is an example of adding a plugin
module.exports = {
// ...
h5: {
// ...
webpackChain (chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: require('npm-install-webpack-plugin'),
args: [{
// Use --save or --save-dev
dev: false,
// Install missing peerDependencies
peerDependencies: true,
// Reduce amount of console logging
quiet: false,
// npm command used inside company
npm: 'cnpm'
}]
}
}
})
}
}
}
h5.router
object
Routing related configuration.
h5.router.mode
'hash' | 'browser'
Default value: 'hash'
Configure the routing mode.' hash' and 'browser' correspond to hash routing mode and browser history routing mode, respectively.
Example:
module.exports = {
// ...
h5: {
// ...
router: {
mode: 'hash' // or 'browser'
}
}
}
For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' })
, the browser address bar will be changed to:
https://{{domain}}/#/pages/index/index
(hash mode)https://{{domain}}/pages/index/index
(browser mode)
h5.router.basename
string
Configure the routing base path.
例子:
module.exports = {
// ...
h5: {
// ...
router: {
basename: '/myapp'
}
}
}
For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' })
, the browser address bar will be changed to:
https://{{domain}}/#/myapp/pages/index/index
(hash mode)https://{{domain}}/myapp/pages/index/index
(browser mode)
h5.router.customRoutes
object
Configure custom routes.
例子:
module.exports = {
// ...
h5: {
// ...
router: {
customRoutes: {
'/pages/index/index': '/index'
}
}
}
}
For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' })
, the browser address bar will be changed to
https://{{domain}}/#/index
(hash mode)https://{{domain}}/myapp/index
(browser mode)
h5.enableSourceMap
boolean
Default value: true
in watch mode, otherwise false
.
Used to control whether to generate sourceMap corresponding to js, css.
h5.sourceMapType
string
Default value: 'cheap-module-eval-source-map'
Detail configuration refer to Webpack devtool configuration。
h5.useHtmlComponents
Taro 3.2.4 started to support
boolean
Default value: false
Used to control whether to use the compatibility component library on the H5 side, for details see [React Compatibility Component Library](./h5#React Compatibility Component Library)。
h5.enableExtract
boolean
Default value: false
in watch mode, otherwise true
.
The extract function switch, when turned on, will use mini-css-extract-plugin
to separate css files, which can be configured via h5.miniCssExtractPluginOption to configure the plugin.
h5.esnextModules
array
The configuration requires additional modules compiled via Taro's preset postcss.
Suppose that the style units in taro-ui need to be adapted for conversion.
module.exports = {
// ...
h5: {
// ...
// After this configuration, the style files introduced in the code under the `node_modules/taro-ui/` path will be compiled by postcss.
esnextModules: ['taro-ui']
}
}
h5.postcss
object
configure postcss
related plugins.
h5.postcss.autoprefixer
object
The autoprefixer
configuration can be performed. The configuration items refer to the documentation, eg:
module.exports = {
// ...
h5: {
// ...
postcss: {
autoprefixer: {
enable: true,
config: {
/* autoprefixer configuration item */
}
}
}
}
}
h5.postcss.pxtransform
object
Configuration of pxtransform
can be done. Configuration items refer to documentation, eg:
module.exports = {
// ...
h5: {
// ...
postcss: {
pxtransform: {
enable: true,
config: {
/* pxtransform configuration item */
}
}
}
}
}
h5.postcss.cssModules
object
CSS Modules can be configured as follows.
module.exports = {
// ...
h5: {
// ...
postcss: {
// css modules function switches and related configuration
cssModules: {
enable: false, // default is false, if you want to use the css modules function, set it to true
config: {
namingPattern: 'module',
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
h5.styleLoaderOption
object
Additional configuration for style-loader
. configuration item reference documentation, eg:
module.exports = {
// ...
h5: {
// ...
styleLoaderOption: {
insertAt: 'top'
}
}
}
h5.cssLoaderOption
object
Additional configuration for css-loader
. configuration item reference documentation, eg:
module.exports = {
// ...
h5: {
// ...
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
}
h5.sassLoaderOption
object
Additional configuration for sass-loader
. configuration item reference documentation, eg:
module.exports = {
// ...
h5: {
// ...
sassLoaderOption: {
implementation: require("node-sass")
}
}
}
h5.lessLoaderOption
Supported since v3.0.26
object
Additional configuration for less-loader
. configuration item reference documentation, eg:
module.exports = {
// ...
h5: {
// ...
lessLoaderOption: {
lessOptions: {
strictMath: true,
noIeCompat: true
}
}
}
}
h5.stylusLoaderOption
object
Additional configuration for stylus-loader
. configuration item reference documentation。
h5.miniCssExtractPluginOption
object
Additional configuration for mini-css-extract-plugin
, effective if h5.enableExtract configuration is true
.
configuration item reference documentation, eg:
module.exports = {
// ...
h5: {
// ...
miniCssExtractPluginOption: {
filename: 'css/[name].css',
chunkFilename: 'css/[id].css'
}
}
}
h5.imageUrlLoaderOption
object
The url-loader
configuration for png | jpg | jpeg | gif | bpm | svg
files. configuration item reference [documentation], eg:
h5.mediaUrlLoaderOption
object
The url-loader
configuration for mp4 | webm | ogg | mp3 | wav | flac | aac
files.configuration item reference [documentation], eg:
module.exports = {
// ...
h5: {
// ...
mediaUrlLoaderOption: {
limit: 8192
}
}
}
h5.fontUrlLoaderOption
object
The url-loader
configuration for woff | woff2 | eot | ttf | otf
files. Refer to the documentation for the configuration items.
rn
Configure exclusively for RN.
rn.appName
string
Set the name of the registered application in the RN bundle
module.exports = {
// ...
rn: {
// ...
appName: 'TaroDemo'
}
}
rn.entry
string
Entry uses the module lookup rule {name}. {platform}. {ext} to automatically distinguish between platforms
module.exports = {
// ...
rn: {
// ...
entry: 'index.android.tsx'
}
}
rn.output
object
Set the output path of the bundle generated by Metro packaging, the default dist directory
module.exports = {
// ...
rn: {
// ...
output: {
iosSourceMapUrl: '', // sourcemap file url
iosSourcemapOutput: '../taro-native-shell/ios/main.map', // sourcemap file output path
iosSourcemapSourcesRoot: '', // The root directory when converting sourcemap resource paths to relative paths
androidSourceMapUrl: '',
androidSourcemapOutput: '../taro-native-shell/android/app/src/main/assets/index.android.map',
androidSourcemapSourcesRoot: '',
ios: '../taro-native-shell/ios/main.jsbundle',
iosAssetsDest: '../taro-native-shell/ios',
android: '../taro-native-shell/android/app/src/main/assets/index.android.bundle',
androidAssetsDest: '../taro-native-shell/android/app/src/main/res'
},
}
}
rn.postcss
object
postcss
related configuration, other style languages preprocessed after this configuration.
module.exports = {
// ...
rn: {
// ...
postcss: {
// postcss 配置,参考 https://github.com/postcss/postcss#options
options: { /* ... */ },
// 默认true,控制是否对 css value 进行 scalePx2dp 转换,pxtransform配置 enable 才生效
scalable: boolean,
pxtransform: {
enable: boolean, // 默认true
config: { /* ... */ } // 插件 pxtransform 配置项,参考尺寸章节
},
},
}
}
rn.sass
object
sass
related configurations. options
configuration item reference documentation。
module.exports = {
// ...
rn: {
// ...
sass: {
options: { /* ... */ },
// 加入到脚本注入的每个 sass 文件头部,在 config.sass 之前
additionalData: '', // {String|Function}
}
}
}
rn.less
object
less
related configurations. options
configuration item reference documentation。
module.exports = {
// ...
rn: {
// ...
less: {
options: { /* ... */ },
additionalData: '', // {String|Function}
}
}
}
rn.stylus
object
stylus
related configurations. stylus.options
configuration item reference documentation。
module.exports = {
// ...
rn: {
// ...
stylus: {
options: { /* ... */ },
additionalData: '', // {String|Function}
}
}
}
rn.resolve
object
resolve
handles the configuration of dependency files.
resolve.include
can be configured with multiple arrays of npm
package names, treating npm
packages as project files, supporting node_modules
platform priority file access and global styles.
module.exports = {
// ...
rn: {
// ...
resolve: {
// ...
include: ['taro-ui'] // Handles cross-platform handling of references to node_modules/test files.
}
}
}
rn.enableMultipleClassName
boolean
Support multiple className
conversions, end with classname
or style
, extract the prefix, and then generate the corresponding xxxStyle according to the prefix. e.g. barClassName -> barStyle
. Default value false
, not enabled.
module.exports = {
rn: {
enableMultipleClassName: false
}
}
rn.enableMergeStyle
boolean
Convert to object when the tag style
property value is an array. Default value false
, not enabled.
module.exports = {
rn: {
enableMergeStyle: false // https://github.com/shinken008/babel-plugin-jsx-attributes-array-to-object#example
}
}