提交 848606b9 编写于 作者: fxy060608's avatar fxy060608

feat(cli): normalize absolute paths in css URLs

上级 7e3c7e15
...@@ -4,4 +4,3 @@ build/rollup-plugin-require-context ...@@ -4,4 +4,3 @@ build/rollup-plugin-require-context
packages/*/packages packages/*/packages
packages/*/template/**/* packages/*/template/**/*
qh-api.js qh-api.js
touch-emulator.js
...@@ -76,7 +76,6 @@ function getH5Options (manifestJson) { ...@@ -76,7 +76,6 @@ function getH5Options (manifestJson) {
h5.publicPath = h5.publicPath + '/' h5.publicPath = h5.publicPath + '/'
} }
} else { // 其他模式,启用 base } else { // 其他模式,启用 base
if (base.startsWith('./')) { if (base.startsWith('./')) {
// 在开发模式, publicPath 如果为 './' webpack-dev-server 匹配文件时会失败 // 在开发模式, publicPath 如果为 './' webpack-dev-server 匹配文件时会失败
h5.publicPath = base.substr(1) h5.publicPath = base.substr(1)
......
const path = require('path')
const defaultOptions = {
limit: -1,
fallback: {
loader: 'file-loader',
options: {
publicPath (url, resourcePath, context) {
if (
process.env.UNI_PLATFORM === 'app-plus' &&
process.env.UNI_USING_V3
) { // app-plus v3 下路径不能以/开头
return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
}
return '/' + path.relative(process.env.UNI_INPUT_DIR, resourcePath)
},
outputPath (url, resourcePath, context) {
return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
}
}
}
}
const inlineLimit =
process.env.UNI_PLATFORM === 'mp-weixin' ||
process.env.UNI_PLATFORM === 'mp-qq' ||
process.env.UNI_PLATFORM === 'mp-toutiao' ||
process.env.UNI_PLATFORM === 'app-plus' // v2需要base64,v3需要rewriteUrl
// mp-weixin,mp-qq,app-plus 非v3(即:需要base64的平台)
// 将/static/logo.png转换为~@/static/logo.png
// @import,src,background,background-image
const rewriteUrl = inlineLimit ? require('postcss-urlrewrite')({
imports: true,
properties: ['src', 'background', 'background-image'],
rules: [{
from: /^@\//,
to: '~@/'
}, {
from: /^\/([^/])/,
to: '~@/$1'
}]
}) : () => {}
module.exports = {
loader: 'url-loader',
options () {
if (process.env.UNI_PLATFORM === 'h5') {
// h5平台,不对 url-loader 作调整,默认limit:4096,也不修改file-loader输出路径
return {}
}
if (inlineLimit) {
return {
...defaultOptions,
limit: process.env.UNI_USING_V3 ? -1 : 40960 // (主要用于background-image)
}
}
return {
...defaultOptions
}
},
rewriteUrl
}
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"hash-sum": "^1.0.2", "hash-sum": "^1.0.2",
"postcss-urlrewrite": "^0.2.2",
"strip-json-comments": "^2.0.1" "strip-json-comments": "^2.0.1"
}, },
"gitHead": "84e9cb1ca1898054d161f1514efadd1ab24fd804" "gitHead": "84e9cb1ca1898054d161f1514efadd1ab24fd804"
......
...@@ -4,10 +4,14 @@ const transformAssetUrls = { ...@@ -4,10 +4,14 @@ const transformAssetUrls = {
'img': 'src', 'img': 'src',
'image': 'src', 'image': 'src',
'cover-image': 'src', 'cover-image': 'src',
// h5
'v-uni-audio': 'src', 'v-uni-audio': 'src',
'v-uni-video': ['src', 'poster'], 'v-uni-video': ['src', 'poster'],
'v-uni-image': 'src', 'v-uni-image': 'src',
'v-uni-cover-image': 'src' 'v-uni-cover-image': 'src',
// nvue
'u-image': 'src',
'u-video': ['src', 'poster']
} }
function rewrite (attr, name) { function rewrite (attr, name) {
......
...@@ -26,7 +26,18 @@ const postcssLoader = { ...@@ -26,7 +26,18 @@ const postcssLoader = {
sourceMap: false, sourceMap: false,
parser: require('postcss-comment'), parser: require('postcss-comment'),
plugins: [ plugins: [
require('postcss-import'), require('postcss-import')({
resolve (id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss') require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
] ]
} }
......
...@@ -104,6 +104,9 @@ const compiler = require('weex-template-compiler') ...@@ -104,6 +104,9 @@ const compiler = require('weex-template-compiler')
const oldCompile = compiler.compile const oldCompile = compiler.compile
compiler.compile = function (source, options = {}) { compiler.compile = function (source, options = {}) {
(options.modules || (options.modules = [])).push(autoComponentsModule) (options.modules || (options.modules = [])).push(autoComponentsModule)
options.modules.push(require('@dcloudio/uni-template-compiler/lib/asset-url'))
options.isUnaryTag = isUnaryTag options.isUnaryTag = isUnaryTag
// 将 autoComponents 挂在 isUnaryTag 上边 // 将 autoComponents 挂在 isUnaryTag 上边
options.isUnaryTag.autoComponents = new Set() options.isUnaryTag.autoComponents = new Set()
......
...@@ -2,8 +2,7 @@ const path = require('path') ...@@ -2,8 +2,7 @@ const path = require('path')
const webpack = require('webpack') const webpack = require('webpack')
const { const {
getMainEntry, getMainEntry
isInHBuilderX
} = require('@dcloudio/uni-cli-shared') } = require('@dcloudio/uni-cli-shared')
const vueLoader = require('@dcloudio/uni-cli-shared/lib/vue-loader') const vueLoader = require('@dcloudio/uni-cli-shared/lib/vue-loader')
...@@ -200,38 +199,6 @@ const v3 = { ...@@ -200,38 +199,6 @@ const v3 = {
const isAppService = !!vueOptions.pluginOptions['uni-app-plus']['service'] const isAppService = !!vueOptions.pluginOptions['uni-app-plus']['service']
const isAppView = !!vueOptions.pluginOptions['uni-app-plus']['view'] const isAppView = !!vueOptions.pluginOptions['uni-app-plus']['view']
const fileLoaderOptions = isInHBuilderX ? {
emitFile: isAppView,
name: '[path][name].[ext]',
context: process.env.UNI_INPUT_DIR
} : {
emitFile: isAppView,
outputPath (url, resourcePath, context) {
return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
}
}
// 处理静态资源
webpackConfig.module
.rule('svg')
.use('file-loader')
.options(fileLoaderOptions)
const staticTypes = ['images', 'media', 'fonts']
staticTypes.forEach(staticType => {
webpackConfig.module
.rule(staticType)
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, {
limit: 1,
fallback: {
loader: 'file-loader',
options: fileLoaderOptions
}
}))
})
const cacheConfig = { const cacheConfig = {
cacheDirectory: false, cacheDirectory: false,
cacheIdentifier: false cacheIdentifier: false
......
...@@ -20,15 +20,14 @@ module.exports = function chainWebpack (platformOptions, vueOptions, api) { ...@@ -20,15 +20,14 @@ module.exports = function chainWebpack (platformOptions, vueOptions, api) {
return function (webpackConfig) { return function (webpackConfig) {
// 处理静态资源 limit // 处理静态资源 limit
const urlLoader = require('@dcloudio/uni-cli-shared/lib/url-loader')
const staticTypes = ['images', 'media', 'fonts'] const staticTypes = ['images', 'media', 'fonts']
staticTypes.forEach(staticType => { staticTypes.forEach(staticType => {
webpackConfig.module webpackConfig.module
.rule(staticType) .rule(staticType)
.use('url-loader') .use('url-loader')
.loader('url-loader') .loader(urlLoader.loader)
.tap(options => Object.assign(options, { .tap(options => Object.assign(options, urlLoader.options()))
limit: 40960
}))
}) })
// 条件编译 vue 文件统一直接过滤html,js,css三种类型,单独资源文件引用各自过滤 // 条件编译 vue 文件统一直接过滤html,js,css三种类型,单独资源文件引用各自过滤
......
...@@ -239,6 +239,7 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt ...@@ -239,6 +239,7 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(process.env.UNI_INPUT_DIR), '@': path.resolve(process.env.UNI_INPUT_DIR),
'./@': path.resolve(process.env.UNI_INPUT_DIR), // css中的'@/static/logo.png'会被转换成'./@/static/logo.png'加载
'vue$': getPlatformVue(vueOptions), 'vue$': getPlatformVue(vueOptions),
'uni-pages': path.resolve(process.env.UNI_INPUT_DIR, 'pages.json'), 'uni-pages': path.resolve(process.env.UNI_INPUT_DIR, 'pages.json'),
'@dcloudio/uni-stat': require.resolve('@dcloudio/uni-stat'), '@dcloudio/uni-stat': require.resolve('@dcloudio/uni-stat'),
......
...@@ -48,7 +48,6 @@ if ( ...@@ -48,7 +48,6 @@ if (
console.warn(`发布H5,需要在uniCloud后台操作,绑定安全域名,否则会因为跨域问题而无法访问。教程参考:https://uniapp.dcloud.io/uniCloud/quickstart-H5`) console.warn(`发布H5,需要在uniCloud后台操作,绑定安全域名,否则会因为跨域问题而无法访问。教程参考:https://uniapp.dcloud.io/uniCloud/quickstart-H5`)
} }
// 初始化环境变量 // 初始化环境变量
const defaultInputDir = '../../../../src' const defaultInputDir = '../../../../src'
const defaultOutputDir = '../../../../dist/' + const defaultOutputDir = '../../../../dist/' +
......
...@@ -150,6 +150,7 @@ if (process.env.UNI_USING_V3) { ...@@ -150,6 +150,7 @@ if (process.env.UNI_USING_V3) {
'background-attachment' 'background-attachment'
] ]
let rewriteUrl
/** /**
* 转换 upx * 转换 upx
* 转换 px * 转换 px
...@@ -160,6 +161,11 @@ if (process.env.UNI_USING_V3) { ...@@ -160,6 +161,11 @@ if (process.env.UNI_USING_V3) {
...opts ...opts
} }
return function (root, result) { return function (root, result) {
if (!rewriteUrl) {
rewriteUrl = require('@dcloudio/uni-cli-shared/lib/url-loader').rewriteUrl
}
rewriteUrl(root)
if (process.env.UNI_PLATFORM === 'h5') { if (process.env.UNI_PLATFORM === 'h5') {
// Transform CSS AST here // Transform CSS AST here
......
...@@ -11,8 +11,16 @@ const isInsideKeyframes = function (rule) { ...@@ -11,8 +11,16 @@ const isInsideKeyframes = function (rule) {
rule.parent && rule.parent.type === 'atrule' && /^(-\w+-)?keyframes$/.test(rule.parent.name) rule.parent && rule.parent.type === 'atrule' && /^(-\w+-)?keyframes$/.test(rule.parent.name)
) )
} }
let rewriteUrl
module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) { module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) {
return function (root, result) { return function (root, result) {
if (!rewriteUrl) {
rewriteUrl = require('@dcloudio/uni-cli-shared/lib/url-loader').rewriteUrl
}
rewriteUrl(root)
root.walkRules(rule => { root.walkRules(rule => {
// Transform each rule here // Transform each rule here
if (!isInsideKeyframes(rule)) { if (!isInsideKeyframes(rule)) {
......
...@@ -6,6 +6,8 @@ import initOn from 'uni-core/service/bridge/on' ...@@ -6,6 +6,8 @@ import initOn from 'uni-core/service/bridge/on'
import { import {
requireNativePlugin requireNativePlugin
,
publish
} from '../bridge' } from '../bridge'
import { import {
...@@ -22,10 +24,6 @@ import { ...@@ -22,10 +24,6 @@ import {
import tabBar from './tab-bar' import tabBar from './tab-bar'
import {
publish
} from '../bridge'
import { import {
initSubscribeHandlers initSubscribeHandlers
} from './subscribe-handlers' } from './subscribe-handlers'
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册