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.
Related
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'm using good plugin for my app, and I have copied the config parameters straight from the sample in the page, console and file are working , but good-http is not working!
here is my configuration:
myHTTPReporter: [
{
module: 'good-squeeze',
name: 'Squeeze',
args: [{error: '*', log: 'error', request: 'error'}]
},
{
module: 'good-http',
args: [
'http://localhost/log-request/index.php?test=23424', // <- test file I created to see if data is being sent or not
{
wreck: {
headers: {'x-api-key': 12345}
}
}
]
}
]
the only argument that is actually working is the ops: * and none of the error: *, ... is working
Am I missing something in my config parameters?
Maybe you should change the threshold parameter of the plugin, is set by default to 20 so it only send data after 20 events. If you want immediate results yo have to change it to 0.
myHTTPReporter: [
{
module: 'good-squeeze',
name: 'Squeeze',
args: [{error: '*', log: 'error', request: 'error'}]
},
{
module: 'good-http',
args: [
'http://localhost/log-request/index.php?test=23424', // <- test file I created to see if data is being sent or not
{
threshold: 0,
wreck: {
headers: {'x-api-key': 12345}
}
}
]
}
]
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...
How do I configure weyland to optimize the css files and also include the map file of the js in the output?
My current config is:
exports.config = function(weyland) {
weyland.build('main')
.task.jshint({
include: 'App/**/*.js',
exclude: ['App/main-built.js'],
})
.task.uglifyjs({
include: ['App/**/*.js', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
})
.task.rjs({
include: ['Content/**/*.css', 'App/**/*.{js,html}', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
loaderPluginExtensionMaps: {
'.html': 'text',
},
rjs: {
name: '../Scripts/almond-custom', //to deploy with require.js, use the build's name here instead
insertRequire: ['main'], //not needed for require
baseUrl: 'App',
mainConfigFile: 'App/main.js', //not needed for require
wrap: true, //not needed for require
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
preserveLicenseComments: false,
generateSourceMaps: true,
//optimize : 'none',
optimize: 'uglify2',
optimizeCss: 'standard.keepLines',
pragmas: {
build: true
},
stubModules: ['text'],
keepBuildDir: true,
out: 'App/main-built.js'
}
});
}