I am trying to switch from the old dojo build system to the new one. I have been pulling my hair out but I can't seem to get the build script to pick up the custom paths mapping that i specified in the building profile. So if my project structure is like:
/www/dojo
/www/dojox
/www/dijit
/www/app.profile.js
/www/myapp/package.json #links to myapp.profile.js
/www/myapp/myapp.profile.js #standard package profile stub
#with test,copyOnly,amd
/www/myapp/main.js
/www/myapp/bar/hello.js
/www/myapp/bar/sometext.html
The files look like below:
//-------------------------------------------
//FILE: app.profile.js
//-------------------------------------------
var profile = (function(){
return {
basePath: ".",
releaseDir: "builds",
releaseName: "v0_0_1",
optimize: "closure",
cssOptimize: "comments",
action: "release",
packages:[
{
name: "dojo",
location: "dojo/dojo"
},
{
name: "myapp",
location: "myapp"
}
],
prefixes: {
"foo": "bar" //doesn't seem to work?
},
paths: {
"foo": "bar" //doesn't seem to work?
},
loaderConfig:{
paths: {
"foo": "bar" //doesn't seem to work?
},
},
layers: {
"mypp/myapp-release": {
include: [
"myapp/main"
]
}
}
};
})();
//--------------------------------------
//FILE: main.js
//--------------------------------------
require(["dojo/_base/html", "foo/hello", "dojo/text!foo/sometext.html"],
function(html, Bar, sometext){
alert(sometext);
}
);
//--------------------------------------
//FILE: hello.js
//--------------------------------------
require([ ],
function(){
alert("hello!");
}
);
And I am running the build command with:
node /www/dojo/dojo.js load=build /www/app.profile.js
The build script would tell me that the dependency "foo/hello" is not found, even though it should have been mapped to bar/hello.js ; the same goes for foo/sometext.html .
Any help would be really appreciated; I don't want to keep pulling my hair til I'm bald! :D
Related
The problem
Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production.
Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?
error-message when running npm
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840
And multiple more, but all have the same error, just the filename changes.
webpack-Config
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}
Project Repo/Branch
You need to add resolve-url-loader to your build, like this:
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}
resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.
I tried it locally and the build is now passing :) Cheers!
preface
I am currently switching our build process over from Browserify to Webpack. As the project uses a great deal of coffee-script, I have many import statements such as:
require('./coffee-file-without-extension') # note the lack of .coffee
require('./legacy-js-file-without-extension') # note the lack of .js
problem
Browserify handles the absence of the file extension just fine. Webpack seems to have issue per this error:
Module not found: Error: Can't resolve './wptest-req' in '/Users/jusopi/Dev/Workspaces/nx/nx-ui/src'
I setup a super simple test project for this where I have the following files:
wptest.coffee
require('./wptest-req')
wptest-req.coffee
module.exports = {}
webpack.config.js
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/wptest.coffee'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
}
};
end-goal
I am hoping I do not have to go over every file in our application and append .coffee to all require statements for coffee files if at all possible.
While this solution is not specific to coffee-loader, it did resolve my issue. I needed to add a resolve object to my configuration:
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/main.coffee'
// other: './src/index2.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
},
resolve: {
extensions: [ '.coffee', '.js' ]
}
};
src - https://github.com/webpack-contrib/coffee-loader/issues/36
When I use BrowserSync directly from the command line it works fine. But when I use the Grunt file from the Drupal Basic theme, BrowserSync is not detecting changes being made to the SASS and CSS files. Whereas the SASS to CSS conversion is working fine...
EDIT: when I use 'css/base/*.css' instead of 'css/{,*/}*.css' it works. So this must be a syntax issue. Any idea for the right syntax?
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/{,*/}*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: true,
proxy: "dev.localhost"
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
So, I found the solution. Apparently the official Grunt pattern should be like this:
'css/**/*.css'
I recently initialized a react app using create-react-app.
I ejected the app and I now have all the files exported to my main directory.
This set up creates a babel.dev.js instead of using .babelrc (it uses babel-loader).
I am trying to figure out how do I configure react-intl and babel-plugin-react-intl without the .babelrc file.
The documentation says .babelrc is recommended
Via .babelrc (Recommended)
.babelrc
{
"plugins": [
["react-intl", {
"messagesDir": "./build/messages/"
}]
]
}
What is the syntax to have this behavior with babel-loader? Right now the plugins in babel.dev.js look like this:
plugins: [
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
[require.resolve('babel-plugin-transform-regenerator'), {
// Async functions are converted to generators by babel-preset-latest
async: false
}],
// Polyfills the runtime needed for async/await and generators
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
// Resolve the Babel runtime relative to the config.
// You can safely remove this after ejecting:
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}]
]
My components currently have the strings defined as follows:
const messages = defineMessages({
summaryTitle: {
"id": "checkout.section.title.summary",
"description": "Summary Section Title",
"defaultMessage": "Summary"
},
shippingTitle: {
"id": "checkout.section.title.shipping",
"description": "Shipping Section Title",
"defaultMessage": "Shipping"
}
});
Add the babel-plugin-react-intl to your plugins array like this:
plugins: [
..., // some plugins here
[require.resolve('babel-plugin-react-intl'), { messageDir: "./build/messages"}]
]
This will load the plugin passing the messageDir as an option to it.
With default build settings I get following build layers:
(X+A), (Y+A+B), (Z+B).
I want:
(X+A), (Y+A), Z, B
B should load only once when we asking Y and Z modules.
I found CommonsChunkPlugin, but I cant configure it properly.
var webpack = require("webpack");
var CommonsPlugin = new require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: "./main"
},
resolve: {
modulesDirectories: [
"."
]
},
output: {
publicPath: "js/",
filename: "[name].builded.js"
},
plugins: [
new CommonsPlugin({
// What should I write here?
})
]
};
Looks like you should add B as separate entry point:
entry: {
main: "./main",
Bentry: ["B"]
},
and add CommonsChunkPlugin in plugins section:
new webpack.optimize.CommonsChunkPlugin('Bentry', 'B.js'),