babel

基于react开发package.json的配置

匿名 (未验证) 提交于 2019-12-02 23:55:01
项目依赖 react网页开发的3件套: react, react-dom, react-router-dom, redux, react-redux react的UI组件库: antd(pc端), antd-mobile(移动端) 类型检测: prop-types http库: axios 开发依赖 打包工具: webpack 代码转换: @babel/core, @babel/preset-react, webpack loader babel-loader css-loader style-loader webpack plugin @babel/plugin-proposal-class-properties html-webpack-plugin babel-plugin-import 相关网站 http://www.axios-js.com/ https://webpack.docschina.org/ https://ant.design/index-cn https://mobile.ant.design/index-cn http://huziketang.mangojuice.top/books/react/ https://react-router.docschina.org/ https://react.docschina.org/ https://cn

vue-cli3 按需引入element-ui

匿名 (未验证) 提交于 2019-12-02 23:55:01
按照官网的教程:按需引入需要借助: 安装: babel-plugin-component 注意:官网是修改 .babelrc 文件,我这里为了方便就直接修改 babel.config.js 文件了 对应的项目根目录下的 babel.config.js 需要修改成为以下:【我是直接拷贝官网的】 在 main.js 里面按需引入: import { Button } from ‘element-ui’; Vue.component(Button.name, Button 启动项目报错: .plugins[0][1] must be an object, false, or undefined 原因是: babel.config.js 里面的plugins多了一个中括号:修改如下: 再次重新启动后又报错: Cannot find module ‘babel-preset-es2015’ from ' 这个是由于babel编译插件版本问题,需要安装最新的 babel 编译插件 “ @babel/preset-env ” ,执行以下安装命令: npm install @babel/preset-env -D 修改 babel.config.js 为: 再次重新启动,终于可以了: 如果觉得能解决您的问题或者 觉得 不错的话可以 点个赞 哦! ――――――――――――――――――――――――――

How to debug NodeJS(ES6) code in VSCode editor?

折月煮酒 提交于 2019-12-02 23:51:40
I am trying to debug my nodejs application written in ES6 from VSCode. But it is throwing following error: node --debug-brk=18712 --nolazy index.js Debugger listening on [::]:18712 /Users/rsiva/Projects/Siva/ntask/ntask-api/index.js:1 (function (exports, require, module, __filename, __dirname) { import express from "express"; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module.

webpack配置

匿名 (未验证) 提交于 2019-12-02 23:51:01
一、webpack配置 初始化npm和安装webpack npm init -y //-y表示默认配置 npm install -g webpack webpack-cli //-g 表示全局安装 如果要使用命令行就要全局安装 -D表示安装在本地 创建webpack.config.js   相关配置参数: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器,用于把模块原内容按照需求转换成新内容 Plugin:扩展插件 Output: 输出结果 const path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/index.js'), //__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接 output: { path: path.resolve(__dirname, 'dist'), //输出的文件路径 filename: 'bundle.js', //输出的主文件的文件名 publicPath: '/' //上线时配置的是cdn的地址 } } 二、HTML模板 html-webpack-plugin

单元测试jest部署

匿名 (未验证) 提交于 2019-12-02 23:49:02
基础插件 @babel/core 说明:编译工具核心模块包 @babel/preset-env 说明:编译工具,支持es2015特性的编译打包工具包 babel-jest 说明:对.jsx、.js文件进行转义的包工具。 jest 说明:jest单元测试模块包 jest.config.js 若无jest.config.js,则执行jest --init(初始化jest的配置文件): 修改: moduleNameMapper: { "^@/(.*)$": "<rootDir>/src/$1" //映射jssdk源码src的目录 }, __babel.config.js__ module.exports = { presets: [ ['@babel/preset-env', { //配置babel预置编译器为@babel/preset-env targets: { node: 'current' } }] ] }; 参照【引入jest需安装的基础插件】 参照【引入jest的相关配置】 1.安装jest基础插件 参照【引入jest需安装的基础插件】 2.安装适配TypeScript相关插件 @babel/preset-typescript 说明:支持typescript的编译 @types/jest 说明:在typescript中支持jest的afterAll、descript

Vuetify按需加载配置

匿名 (未验证) 提交于 2019-12-02 23:49:02
自己配置vuetify按需加载的步骤,在此记录: 执行npm install --save-dev babel-plugin-transform-imports 或 yarn add babel-plugin-transform-imports添加按需加载支持。 配置.babelrc文件,添加改为如下配置: "plugins": ["transform-vue-jsx", "transform-runtime", ["transform-imports", { "vuetify": { "transform": "vuetify/es5/components/${member}", "preventFullImport": true } }], ["component", [ { "libraryName": "element-ui", "styleLibraryName": "~./src/style/theme" } ]] ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 在main.js中(或单独的js文件中引入)添加如下按需加载方式: import Vuetify, { VApp, // required VTabs, VTab, VTabItem, VCard, VCardText, VBtn } from 'vuetify/lib' Vue.use

一些packjson.js和webpack.js的配置

匿名 (未验证) 提交于 2019-12-02 23:43:01
webpack.js var webpack = require(‘webpack’); var path = require(‘path’); var precss = require(‘precss’); var autoprefixer = require(‘autoprefixer’); module.exports = { // 入口文件地址,不需要写完,会自动查找 entry: ‘./src/main’, // 输出 output: { path: path.join(__dirname, ‘./dist’), // 文件地址,使用绝对路径形式 filename: ‘[name].js’, //[name]这里是webpack提供的根据路口文件自动生成的名字 chunkFilename: ‘[name].js’, publicPath: ‘/release/dist/’ // 公共文件生成的地址 }, // 服务器配置相关,自动刷新! devServer: { historyApiFallback: true, hot: true, inline: true, grogress: true, }, // 加载器 module: { // 加载器 loaders: [ // 解析.vue文件 { test: /.vue /, loader: ‘babel’,

webpack4 es6转换

匿名 (未验证) 提交于 2019-12-02 23:43:01
在webpack里用es6语法, ie浏览器不识别,为了让浏览器识别,需要用到bebal转换; 步骤: 1在bebal官网的设置里,点击webpack,就会出现相应的教程: module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }第三步:4生成一个配置文件.babelrc 注意是在根路径,也就是和你要打包的js文件同一级别.并且在里面写上{ "presets": [ "@babel/preset-env"] }, 按照它的要求安装@babel/preset-env,并进行设置 require( "@babel/polyfill"); 或者用 module.exports = { entry: [ "@babel/polyfill", "./app/js"], }; 生产环境下的打包 在docs选项里 transform-runtime插件按照要求一步一步做,最后把corejs的属性改成2,然后下载个corejs就可以了. 下图是把配置放到了配置项里,当然放到.bebalrc文件也可以 1 { 2 test: /\.js$/, 3 exclude: /node_modules/, 4 loader: "babel-loader" 5 // options:{ 6

vue-cli3使用vue-svg-loader加载svg

匿名 (未验证) 提交于 2019-12-02 23:42:01
vue-svg-loader Documentation - FAQ webpack loader that lets you use SVG files as Vue components 在 Microsoft Edge 存在ES6 spread & rest 语法无法转译的问题 Error: Expected identifier, string or number Uncaught SyntaxError: Unexpected token ... 添加 babel-loader 进行语法转译 const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .use('babel-loader') .loader('babel-loader') .end() .use('vue-svg-loader') .loader('vue-svg-loader') .options({ svgo: { plugins: [ { removeDoctype: true }, { removeComments: true }, { removeViewBox: false } ], removeViewBox: false, }, .end() }) Edge support issue