ArcGIS API for JavaScript 4.15已经可以支持与react和vue等前端主流框架融合了,官方提供了两种方式,webpack-plugin
或者esri-loader
。
esri-loader使用的方式比较奇怪,想要使用 webpack-plugin的方式以import的方式引入arcgis js api。
同时arcgis还基于webpack-plugin提供了脚手架ArcGIS CLI
arcgis cli 脚手架的使用
使用方法如下
(1)首先全局安装ArcGIS CLI
npm install -g @arcgis/cli
(2)创建自己的工程
React工程
arcgis create my-react-application -t react
VUE工程
arcgis create my-vue-application -t vue
(3)创建完成后
npm start
即可启动该项目
VUE符号字体不显示
当我喜滋滋的完成以上步骤时发现,VUE创建的项目的放大缩小的图标无法显示
分析问题
分析一下应该是字体文件没有被加载,字体文件是woff或者woff2,于是网上一通搜索,通过修改路径都无法解决
后台通过查看build之后的页面代码发现,字体文件的引用路径在打包时都被替换成[object Module],于是恍然大悟
字体文件存储在./build文件夹下,显然VUE在打包静态资源的地址时出了问题。
一通百度,果然发现问题
这是因为file-loader默认采用ES模块语法,然而Vue生成的是CommonJS模块语法,二者不一致。要么让file-loader或url-loader采用CommonJS语法,要么让Vue采用ES语法。
解决问题
刚好file-loader或url-loader有一个esModule选项能调整,将其设置为false即可:
在webpack.config.js文件中,找到以下内容,在options中增加 esModule: false
.......
{
test: /.(jpe?g|png|gif|svg|webp)$/,
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB (10240 bytes)
limit: 10 * 1024
}
},
{
test: /.(wsv|ttf|otf|eot|woff(2)?)(?[a-z0-9]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'build/[name].[ext]'
}
}
]
},
......
修改后的代码如下
.......
{
test: /.(jpe?g|png|gif|svg|webp)$/,
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB (10240 bytes)
limit: 10 * 1024,
esModule: false
}
},
{
test: /.(wsv|ttf|otf|eot|woff(2)?)(?[a-z0-9]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'build/[name].[ext]',
esModule: false
}
}
]
},
......
看一下结果
Nice 完美解决