webpack - 在 NPM 包开发中使用 Laravel 的 Webpack 别名
问题描述
我正在尝试使用laravel-mix
/webpack
应用程序构建一个 npm 包,我想为某些文件夹结构设置一个别名,所以我起草了一些webpack.config.js
文件
webpack.config.js
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
let mix = require('laravel-mix');
let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');
new ComponentFactory().installAll();
require('./webpack.mix');
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');
module.exports = new WebpackConfig().build();
我有在 require 方法中提到的 webpack.mix.js 文件:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss');
mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
.webpackConfig({
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
ProjectComponents: path.resolve(__dirname, 'resources')
}
}
})
.sourceMaps().version().browserSync('nitsapp.local');
一切正常,我的意思是正在生成块,资产文件夹结构没有问题,唯一的问题仍然存在alias
我试图在我的模板中导入为:
import {login} from 'NitsModels/config/_model'
export default {
name: "LoginLayoutOne",
data() {
return {
email: '',
password: '',
error: '',
}
},
beforeCreate() {
console.log('check');
this.$auth.logout();
},
methods: {
login() {
this.loading = true;
this.error = "";
const user = {
email: this.email,
password: this.password
};
login(user).then(resolve => {
this.loading = false;
// console.log(resolve.redirect);
this.$router.push(resolve.redirect)
}).catch(error => {
this.loading = false;
this.error = error
});
}
}
}
我的npm
script/package.json 文件看起来像:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/nitseditor-frontend/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"nitseditor-frontend": "0.0.2",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.2",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.2.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"laravel-mix-alias": "^1.0.2",
"vuex": "^3.1.2"
}
}
不知道为什么找不到文件:
ERROR Failed to compile with 1 errors
12:42:01 AM
This dependency was not found:
* NitsModels/config/_model in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save NitsModels/config/_model
Asset Size Chunks Chunk Names
/nits-assets/js/app.js 8.74 MiB /nits-assets/js/app [emitted] /nits-assets/js/app
nits-assets/chunks/0.aabd72aaac8025782e17.js 54.5 KiB 0 [emitted] [immutable]
nits-assets/chunks/1.09bd4a0c45db3c2f579e.js 24.5 KiB 1 [emitted] [immutable]
nits-assets/css/app.css 24.1 KiB /nits-assets/js/app [emitted] /nits-assets/js/app
ERROR in /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'NitsModels/config/_model' in '/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage'
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&) 53:0-59 78:6-12
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/routes.js
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/app.js
@ multi ./node_modules/nitseditor-frontend/Assets/js/app.js ./node_modules/nitseditor-frontend/Assets/sass/app.scss
[Browsersync] Proxying: http://nitsapp.local
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.113:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Watching files...
解决方案
我没有提到的一件事是我正在本地开发 npm 包并试图对我的库文件进行符号链接,这可能导致我的问题没有答案,逐渐我知道我需要用符号链接解决 false . 所以,我将我的文件重新配置webpack.mix.js
为:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss');
mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
.webpackConfig({
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
symlinks: false,
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
}
}
})
.sourceMaps().version();
如果你能看到我的webpackConfig()
必须。我希望这可以帮助别人。resolve
symlinks: false
推荐阅读
- powerbi - 计算先前日期的 Powerbi DAX 公式
- python - 在django中查询多对多对象的属性
- postgresql - Google Cloud Function 访问 Cloud SQL PostgreSQL 数据库超时
- java - Sonarqube 错误地显示“可能的空指针取消引用”错误
- flutter - Flutter:setState() 不会触发构建
- angular - 角度 2 中的常量对象列表
- linux - 内核代码如何在汇编级别访问内存
- java - 在spring中动态更新@value注解的字段
- android - TFDQuery 导致 App 在 iOS 模拟器上运行失败(Delphi 10.3 Upd 3 Firemonkey)
- r - 如何在 Rmarkdown 文件和 Rmarkdown html 文档中设置绘图的缩放、适合、分辨率?