How do we get around the "document is not defined" error when doing a r.js build via r.js -o against a dijit?
Specifically, I'm trying to build r-build.js:
define(["require", "exports", "dijit/layout/ContentPane"], function (require, exports, ContentPane) {
function simple() {
return ContentPane;
}
return simple;
});
Using r.js.cmd -o r-build.js and it reports:
ReferenceError: document is not defined
In module tree:
test/simple
dijit/layout/ContentPane
dijit/_Widget
dojo/query
dojo/selector/_loader
My r-build.js file looks like this:
({
appDir: "../",
baseUrl: "amd",
dir: "../../release",
optimize: "none",
modules: [
{
name: "test/simple",
exclude: ["jquery", "dojo"]
}
],
packages: [
{
name: 'cm',
location: 'http://localhost:93/CodeMirror'
},
{
name: 'jquery',
location: 'd:/code/jquery/src',
main: 'jquery'
},
{
name: 'jquery/ui',
location: 'http://localhost:93/jquery-ui/ui'
},
{
name: 'jquery/themes',
location: 'http://localhost:93/jquery-ui/themes'
},
{
name: 'sizzle',
location: 'http://localhost:93/jquery/external/sizzle/dist',
main: 'sizzle'
},
{
name: 'dojo',
location: 'd:/code/dojo'
},
{
name: 'dijit',
location: 'd:/code/dijit'
},
{
name: 'xstyle',
location: 'http://localhost:93/xstyle'
}
]
})
I'm fighting with the same issue. Building a r.js bundle with Dojo is a pain.
That one can be easy to fix... If you don't have problems with the supported browsers (post pre-ie9, for instance) override that file and change the lines that check the querySelectorAll to true and you will not need to do those checks. Like...
has.add("dom-qsa2.1", true);
has.add("dom-qsa3", true);
Hope it helps a bit...
Related
I'm using requirejs optimizer and I have this configuration file which can be run via node r.js -o build.js
({
baseUrl: ".",
name: "src/app/SPA/AppContext",
out: "src/app/SPA/build/app.js",
paths: {
n: "empty:",
N: "empty:"
},
optimize: 'none'
});
Can someone provide the equivalent for rollup.config.mjs? Here's what I have now:
export default [
{
input: 'src/app/SPA/AppContext.js',
output: {
file: 'src/app/SPA/build/app.js',
name: 'src/app/SPA/AppContext',
format: 'amd',
paths: {
n: 'empty:',
N: 'empty:'
},
amd: {
id: 'src/app/SPA/AppContext'
}
}
}
];
Currently, the output file does not include the dependencies.
I am trying with following rollup.config.js file
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
watch: {
skipWrite: false,
clearScreen: false,
include: 'src/**/*',
//exclude: 'node_modules/**',
// chokidar: {
// paths: 'src/**/*',
// usePolling: false
// }
},
plugins: [
clean(),
copy({
targets: [
{ src: 'src/*', dest: 'dist' }
]
}),
typescript({
typescript: require("typescript"),
include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" },
{
file: "example/src/reactComponentLib/index.js",
format: "es",
banner: "/* eslint-disable */"
}
]
}
];
I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.
Anyone have any idea how to resolve this?
watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).
You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:
plugins: [
{
name: 'watch-external',
buildStart(){
this.addWatchFile(path.resolve(__dirname, 'foo.js'))
}
}
]
Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:
import fg from 'fast-glob';
export default {
// ...
plugins: [
{
name: 'watch-external',
async buildStart(){
const files = await fg('src/**/*');
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
In my VUE project, there are several templates which have the same filename but located in different source sub-folders. I'm using webpack 3.12 to build it, and the devtool set to 'cheap-module-eval-source-map'.
After I run webpack-dev-server 2.11.1 to debug it, all template source files are put into the root folder 'webpack://' of the browser's sourcemap, so ONLY one of these files can exist, others are lost, I can't debug them.
Is there a way to make these files co-existing in the sourcemap?
module.exports = {
plugins: [
new VueLoaderPlugin()
],
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ?
{
warnings: false,
errors: true
} :
false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
}
}
At last, I changed 'cheap-module-eval-source-map' to 'module-eval-source-map', the relative path of source files are kept.
I've read the official document of devtool, it says "it doesn't have column mappings, it only maps line numbers." if "cheap" mode used, I don't understand why the relative path is discarded.
eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column
mappings, it only maps line numbers. It ignores SourceMaps from
Loaders and only display transpiled code similar to the eval devtool.
eval-cheap-module-source-map - Similar to eval-cheap-source-map, however, in this case Source Maps from Loaders are processed for
better results. However Loader Source Maps are simplified to a single
mapping per line.
This worked for me when using vue-cli-service serve: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-577364101
In vue.config.js:
let path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
}
i have a following requirejs configuration in my code:
require.config({
baseUrl: "js",
// urlArgs: 'cb=' + Math.random(),
deps:["config","app"],
paths: {
'jquery' : 'jquery/jquery',
'jquerymobile.config' : 'mobile/jquerymobile.config',
'jquerymobile': 'mobile/jquery.mobile-1.3.1.min' ,
'underscore': 'underscore-amd/underscore-min',
'backbone' : 'backbone-amd/backbone-min',
text: 'plugins/text'
},
shim: {
underscore: {
exports: "_"
},
'jquery' : 'jquery',
'jquerymobile.config' : ['jquery'],
jquerymobile : {
deps : ["jquery", 'jquerymobile.config']
},
backbone: {
deps: ['underscore', 'jquery', 'jquerymobile'],
exports: 'Backbone'
}
}
});
inside jquerymobile.config file i have console log statement, which cannot be seen after optimization with following build profile (build.js):
({
appDir: '../',
baseUrl: 'js',
dir: '../../dist',
name: 'config',
skipDirOptimize:true,
fileExclusionRegExp: /^(r|build)\.js$/,
excludeShallow: ['settings'],
mainConfigFile: '../js/config.js',
optimizeCss: 'standard',
removeCombined: true,
deps:["config","app"]
})
I have a feeling that r.js ignoring the shim, dependecies,\n
is there any workaround?
thanks for help
Please try the following way:
include your jquerymobile.config in main.js require dependencies list:
require(['app', 'jquerymobile.config', 'jquerymobile'], function(App) {
App.initialize();
});
For my packages, dojo seems to be appending 'main.js' to end of each file resulting in a '404' has any one experienced this and or have a solution?
GET http://localhost:9000/scripts/prodLayers/main.js 404 (Not Found)
var dojoConfig = {
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
},
tlmSiblingOfDojo: true,
async: true,
parseOnLoad: false,
packages: [
{ name: "prod", location: "/scripts/prodLayers"}
]
};
packages: [
{ name: "prodLayers", location: "/scripts/mylibs", main: "prodLayers"}
]
The "main" attribute is name of the file to be referenced using 'baseUrl' to define the package locations may also help to simplify the "location" params.