Cómo usar tsify para generar mapas fuenteIntroducción Si estás usando React, entonces debes haber jugado con muchos de tus propios componentes y haber probado ****enjoy. Durante el proceso de desarrollo del front-end de OneAPM, también encontramos algunos problemas de uso compartido de componentes: por ejemplo: ¿debería publicarse directamente a través de git o NPM? ¿Es código ES5 o código ES6? ¿Cómo resolver conflictos entre Babel5 y Babel6? Este artículo demuestra el conocimiento necesario para publicar un módulo escribiendo un ejemplo llamado MyComponent sin tocar pruebas unitarias, especificaciones de código, etc. De hecho, el desarrollo del front-end está cambiando cada día que pasa. Justo después de disfrutar de los beneficios de la modularización, la componenteización y las pruebas unitarias, tenemos que adoptar rápidamente los cambios en las herramientas de automatización como Grunt, Gulp, Browserify y Webpack. Además de las herramientas y los ecosistemas, JavaScript también es una parte muy importante del mundo del desarrollo. Además de las herramientas y los ecosistemas, el propio JavaScript también se está desarrollando rápidamente: ES2015 (ES6), ES2016 (ES7)... A este ritmo, es casi un estándar cada año. Para resolver el problema de compatibilidad, surgieron los conceptos de código fuente y compilación. Los desarrolladores de front-end pueden disfrutar de la conveniencia que brindan los estándares e incluso los borradores de especificaciones no finalizados a través de azúcar sintáctico, convertidores, Polyfill, etc., lo que mejora enormemente la eficiencia del desarrollo. En cuanto al módulo en sí, su función es muy sencilla: mostrar las propiedades del propio módulo. En el código fuente, escribiremos el componente MyComponent.jsx y lo colocaremos en el directorio src del proyecto. importar Reaccionar desde 'react'; const MyComponent = props=gt; { return lt; divgt; props: lt; {JSON.stringify(props, null, 2); {JSON.stringify(props, null, 2); {JSON.stringify(props, null, 2)stringify(props, null, 2)}lt;/pregt;lt;/divgt;}Exporta el MyComponent predeterminado; Para cada lugar donde colocar estos archivos, recomiendo las siguientes convenciones: src se usa para almacenar el código fuente, lib se usa para almacenar el código compilado y este directorio es de solo lectura para todos los archivos que contienen la sintaxis ES6. Todos los archivos que contienen sintaxis ES6 tienen la extensión .es6 y todos los archivos que contienen sintaxis JSX tienen la extensión .jsx. Supongamos que hay dos archivos más en el código fuente, a saber, foo.es6 y bar.js. Para simplificar, deben colocarse en el directorio raíz de src. Compilación Para poder compilar código ES6 en ES5, necesita instalar Babel, una herramienta lo suficientemente ambiciosa como para hacer que JavaScript se ejecute en todas partes en una sola compilación. (¿Suena un poco Java?) La versión más utilizada es Babel5, pero la versión Babel6 es más concisa y altamente recomendada. Dado que hay dos versiones de Babel, es probable que el módulo A dependa de la versión de Babel5, mientras que el módulo B dependa de la versión de Babel6. La mejor manera de resolver este problema es dividir A y B, desarrollarlos y publicarlos de forma independiente. La mejor manera de resolver este problema es dividir A y B, desarrollar y publicar de forma independiente y publicar el código de la versión ES5 compilada al publicar en NPM.
npm uninstall babel-cli --global es la forma correcta de instalar babel-cli como una dependencia de desarrollo. npm install babel-cli ---save-dev no llama directamente a Babel global, sino que llama al archivo ejecutable de Babel en la dependencia. /node_modules/.bin/babel Si organiza el código según la convención anterior, la estructura del directorio src es la siguiente src├──bar.js├─foo.es6└──Todo el código del módulo MyComponent.jsx es en un directorio, lo que hace que el proceso de compilación sea más simple y se pueda completar con solo unos pocos comandos. /node_modules/.bin/rimraf lib./node_modules/.bin/babel src --copy-files --source-maps --extensions .es6, .es, .jsx --out-dir lib Estructura del directorio de salida lib├ ─ ─ bar.js ├── foo.js ├─ foo.js.map ├─ MyComponent.js └── MyComponent.js.map Explique la función de cada comando: el primer comando./node_modules/.bin/rimraf El rol de lib Es una buena práctica limpiar cualquier modificación manual de los archivos bajo lib antes de compilar. El segundo comando/node_modules/.bin/babel src --out-dir lib --source-maps --extensions .es6, .es, .jsx --copy-files función atraviesa los archivos en el directorio src si el sufijo. Uno de los .es/.es6/.jsx se compilará en ES5. Si el sufijo es .es/.es6/.jsx, se compilará en ES5; de lo contrario, se copiará en el directorio de salida lib. Parámetros: --out-dir lib especifica el directorio de salida como lib --extensions .es6, .es, .jsx especifica el tipo de archivo que necesita compilarse --copy-files copia archivos que no necesitan compilarse -- source-maps genera archivos de mapeo fuente (souce-map) Otro paso en el proceso de compilación es cargar la configuración del archivo .babelrc. El contenido del archivo es el siguiente { "presets": [es2015", "stage-0",. "react" ]} Esto se debe a que Babel6 adopta un complemento Diseñado para lograr flexibilidad de configuración: si desea convertir archivos de sintaxis JSX, agregue el ajuste preestablecido de reacción. Si desea convertir el archivo de sintaxis JSX, agregue el ajuste preestablecido de reacción y agregue babel. -preset-react a las dependencias del proyecto npm. install babel-preset-react ---save-dev Desarrollo de código de muestra y depuración del módulo React Actualmente, la mejor herramienta de empaquetado sigue siendo Webpack.