How webpack shuts down strict mode

the with statement is used in the development process, and the webpack cannot be compiled

the reason is that strict mode cannot use with , but how to close strict mode ?

webpack :4.8.3  babel :6.26.3

in addition, the babel-plugin-transform-remove-strict-mode plug-in found on the Internet was also used, but the compilation failed.

.babelrc file

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-remove-strict-mode",
    [
      "import",
      {
        "libraryName": "ramda",
        "libraryDirectory": "src",
        "camel2DashComponentName": false
      }
    ]
  ]
}

Webpack

Mar.12,2021

Let's start with my conclusion, which can't be turned off when using ESM modular syntax. Of course, the conclusion may be one-sided.
originally encountered the problem that callee strict mode does not exist. After I used loader , plugin and so on, I couldn't get the specific time to add use strict string. Then I gave up and transform-remove-strict-mode also tried to be invalid.

but there is a way not to add use strict strings, that is, do not use ESM (import export) in this js file where you need to use "strict mode disable syntax", but use commonjs module syntax, that is, require and module/export . One of the ESM specifications says that using the ESM specification syntax automatically enters strict mode, so it's not sure whether this use strict is added by node, not the effect of webpack/babel.

it is recommended not to use with

it seems that you can use with
, such as

, through new Function.

const compileStatements = (statements, object) => {
  if (!statements) { return }
  statements = statements.split(';');
  statements.forEach(v => {
    if (!v) { return; }
    let parameter = v.split('=')[0]
    let fn = new Function('object', 'with(object){ return ' + v.split('=')[1] + '}')
    let value = fn(object);
    object[parameter] = value;
  })
}

Previous: Vue uses picture-card of el-upload in element-ui

Next: The problem of quantity and performance of vue components

Using HtmlWebpackPlugin to dynamically inject compiled files, output settings are useless
study online tutorials learn to package projects using webpack, a simple code implementation. the entry file index.html of the interface is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu...

Javascript webpack

Feb.26,2021
Webpack package react, error its MIME type ('text/html') is not executable
< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...

React.js webpack

Feb.26,2021
React build Times wrong: syntax error: Unexpected token (26:6)
the npm start command runs normally, but the error will be reported when executing with npm run build as follows: syntax error: Unexpected token (Unexpected token (26:6) my index.js: import React, { Component } from react ; import ReactDOM from...

Webpack react.js javascript

Feb.27,2021
Global URL,dev.env.js in vue-cli
how to set the global URL here, you can use both in the development environment and online. ...

Html5 webpack

Feb.27,2021
Projects built with vue-cli always report errors when introducing static third-party plug-ins, and the path should be correct. Index.js has not changed.
...

Vue.js webpack vue-cli

Feb.27,2021
After vue-router lazily loads the configuration, the page becomes a blank page for solution and guidance.
after vue-router lazy loading configuration, the page becomes blank this problem does not occur when lazy loading is not configured, when configuring lazy loading *const product = resolve => { require.ensure([ . pages product.vue ], () =>...

Webpack vue-router

Feb.27,2021
Require fs module in the project, using webpack, but always reporting errors?
require the fs module in the front-end project, but keep reporting errors? fs.readFileSync is not a function introduce code var fs = require( fs ); fs.readFileSync( index.html , utf8 ); this is the webpack configuration file const path = re...

Angularjs webpack

Feb.27,2021
How do I use webpack-dev-server proxyTable.bypass?
there is a bypass Filter in proxyTable. How do I use it? Is it the return path? Or return true false ...

Webpack front-end

Feb.27,2021
Report to babel of undefined after webpack4.1 configuration is completed
webpack project upgrade version configuration is as follows: webpack.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "watch": &quo...

Node.js webpack javascript

Feb.27,2021
Webpack4 can't use dynamic import?
according to the demo in ...

Webpack

Feb.27,2021
React loading style causes echarts width calculation error?
has the following react components: import ". Home.scss"; class Home extends React.Component{ render(){ return ( <div className="box clearfix"> <div className="left"> ...

Webpack react.js javascript

Feb.28,2021
Webpack separates and packages the image referenced in css,css separately. How to solve this problem?
now my project is to package css and js separately, and the directory structure after packaging is the same as before. before packing: csscssimages.. csscss.. .. : webpack.config.js csscss csscss I would like to ask all the great gods, what ...

Webpack vue.js javascript

Feb.28,2021
What is the role of node in vue scaffolding webpack configuration?
question: when I use vue2.5.2 scaffolding to generate a webpack project, I find that it has a configuration node under the automatic generation file build webpack.base.conf.js. What is it and what is it for? ...

Webpack vue.js

Feb.28,2021
How does create-react-app support es7's stage-0 proposal without eject?
refer to antd s custom scheme, introduce babel-plugin-import and react-app-rewired, and add .bablrc file, but not successfully is it necessary to eject? how to make create-react-app support stage-0, without eject? ...

Javascript webpack create-react-app react.js

Feb.28,2021
Vue element project, optimization for third-party js libraries. Cdn is introduced into vue.js,. Some content in the interface cannot be loaded.
introduce vue.min.js webpack.base.conf.jsexternalsvue tabletable into index.html according to the version used if import vue, removes externals and introduces cdn in main.js, it will load normally could you tell me what s wrong with my use? ...

Webpack element-ui vue.js

Feb.28,2021
It doesn't work to use proxy in webpack's devServer to solve cross-domain problems.
use webpack to open the front page on the local localhost:8080 port proxy is configured like this: devServer: { port: 8080, contentBase: . dist , proxy: { abc : { target: http: 122.79...

Ajax Cross-domain Agent webpack-dev-server webpack

Feb.28,2021
What are the advantages and disadvantages of css packaged directly in webpack and introduced in link form?
you can develop css, independently and introduce it in the form of link, and the other is webpack development, which is packaged directly to the corresponding page, so what are the advantages and disadvantages of these two ways? ...

Webpack html css

Feb.28,2021
How does laravel-mix package css and js in blade files
in the laravel project, when using the blade template, you often use @ section ( style ) on the page. <style type="text css"> < style> @ endsection or @ section ( script ) <script type="text javascript"> &...

Webpack php javascript

Feb.28,2021
Vue project cannot run problem
it was fine when the computer was turned off yesterday, and that s how it started today ...

Webpack vue.js

Feb.28,2021
Webpack4.0 npm script uses-- mode development to set development mode and production mode
use webpack4.0 to package npm script "webpack --mode development --config webpack.config.dev.js --progress --colors " tell me how to use the-- mode field in the configuration file code to make a judgment ...

Webpack

Feb.28,2021